bottom for span's programmatically

I want, for <span> s of class "indent", to have a bottom border that is some multiplier times the level of the indent, and #808080 or black for alternating depths of indentation.

The code I have that I try to do this in is:

if (maximum_parenthesis_count > SPAGHETTI.maximum_underline_so_far)
{
    for(var outer = SPAGHETTI.maximum_underline_so_far; outer <= maximum_parenthesis_count; ++outer)
    {
        var identifier = '';
        for(var inner = 0; inner < outer; ++inner)
        {
            if (identifier)
            {
                identifier += ' span.indent';
            }
            else
            {
                identifier = 'span.indent';
            }
        }
        console.log('jQuery');
        console.log(identifier);
        console.log(outer + 'px solid black;');
        jQuery(identifier).css('border-bottom', outer + 'px solid black;');
    }
    SPAGHETTI.maximum_underline_so_far = maximum_parenthesis_count;
}

The console.log statements in Chrome seem like I should be getting what I intended, modulo alternating tones:

jQuery spaghetti.js:134
span.indent spaghetti.js:135
1px solid black; spaghetti.js:136
jQuery spaghetti.js:134
span.indent span.indent spaghetti.js:135
2px solid black; 

However, the nested span's do not show any border on the bottom, and I wonder if I've muffed the jQuery.css() call. I can get the results I want up to n rows in a static stylesheet, but my intent here is to serve up deeper, thicker borders for however many levels of indentation are generated.

When I use Chrome's inspector, it recognizes (for instance) two levels of nested span.indent's, but the list of CSS rules to the right do not show anything dictating a bottom border. The console.log statements seem to indicate that the code has been executed, but the jQuery(identifier).css('border-bottom', outer + 'px solid black;'); seems to pass without a trace.

How can I modify this so that, in this example, the outer span.indent has a 1px solid black bottom border, and the inner span.indent has a 2px solid black bottom border?

---

Working example: http://jsfiddle.net/hVbtz/7/

var outer = 1;
var borderString = outer +  'px solid black';
$("#one").css("border-bottom", borderString);

You don't need the ; in the css call

---

Try this

if (maximum_parenthesis_count > SPAGHETTI.maximum_underline_so_far)
{
    for(var outer = SPAGHETTI.maximum_underline_so_far; outer <= maximum_parenthesis_count; ++outer)
    {
        var identifier = 'span.indent';
        console.log('jQuery');
        console.log(identifier);
        console.log(outer + 'px solid black');
        jQuery(identifier).css('border-bottom', outer + 'px solid black');
        // jQuery automatically matches all identifiers like span.indent
    }
    SPAGHETTI.maximum_underline_so_far = maximum_parenthesis_count;
}

Check that your page has span.indent element or not .

To check this you can use this code

alert(jQuery('span.indent').length);

in the if condition

链接地址: http://www.djcxy.com/p/46028.html

上一篇: 如何清除setInterval函数？

下一篇: 以编程方式为跨度底部