为什么我没有以编程方式为 span 生成边框底部答案

【问题标题】：Why am I not generating a border-bottom for span's programmatically为什么我没有以编程方式为 span 生成边框底部
【发布时间】：2013-03-22 17:05:20
【问题描述】：

对于“缩进”类的<span>s，我希望底部边框是缩进级别的倍数，而#808080 或黑色表示交替的缩进深度。

我尝试在其中执行此操作的代码是：

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;
}

Chrome 中的 console.log 语句似乎我应该得到我想要的，模数交替音调：

jQuery spaghetti.js:134 span.indent spaghetti.js:135 1px纯黑色； spaghetti.js:136 jQuery spaghetti.js:134 span.indent span.indent spaghetti.js:135 2px纯黑色；

但是，嵌套跨度的底部没有显示任何边框，我想知道我是否已经屏蔽了 jQuery.css() 调用。我可以在静态样式表中获得最多 n 行的结果，但我的目的是为生成的缩进级别提供更深、更厚的边框。

当我使用 Chrome 的检查器时，它可以识别（例如）两个级别的嵌套 span.indent，但右侧的 CSS 规则列表没有显示任何指示底部边框的内容。 console.log 语句似乎表明代码已执行，但jQuery(identifier).css('border-bottom', outer + 'px solid black;'); 似乎无影无踪。

如何修改它，以便在此示例中，外部span.indent 具有 1px 纯黑色底边框，而内部 span.indent 具有 2px 纯黑色底边框？

【问题讨论】：

您是否将 span css 设置为 block ？
嗯，也许我一直在玩一些我不应该做的事情。将跨度设置为块甚至使用浮点数会产生非线性渲染，我希望跨度一个接一个地内联渲染。如果内联元素不应该有边框设置，那就回答了我的问题。

标签： javascript jquery css

【解决方案1】：

工作示例：http://jsfiddle.net/hVbtz/7/

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

css 调用中不需要;

【讨论】：

【解决方案2】：

试试这个

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;
}

检查您的页面有span.indent element 或没有。

要检查这一点，您可以使用此代码

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

在if condition

【讨论】：

没错，但我没有复制你的答案。
我试过去掉冒号；它的行为似乎没有什么不同。
检查我在回答中所做的上述更改。还要检查您是否在页面中包含了jQuery在使用之前。