0

这是我的html：

<div>
  <li>
    <a href="#">link</a>
  </li>
  <li>
    <a href="#">link 2</a>
  </li>
  <li>
    <a href="#">link 3</a>
  </li>
</div>

此 jQuery 代码运行良好： 

$("div li").each(function() { 
    $('a', this).wrapInner("<span></span>");
});

然而，这破坏了代码，根本没有任何反应。

$("div li").each(function() {   
    $('a', this).wrapInner("<span></span>");        
        if $('span', this).height() > 10 {
            $(this).addClass('newClass');
        }

    });

我需要做的是在将跨度插入链接之后，我需要测量跨度的高度，如果它超过 10px，那么它包含的 li 将有一个 newClass 类应用于它。

4

6 回答 6

0

像这样试试

$("div li").each(function() {   
$('a', this).wrapInner("<span></span>");        
    if ($('a span', this).height() > 10) {
        $(this).addClass('newClass');
    }

});
于 2013-02-19T13:16:00.280 回答
0

此代码中没有跨度：

$("div li").each(function() {   
    $('a', this).wrapInner("<span></span>");        
        if $('span', this).height() > 10 {
            $(this).addClass('newClass');
        }
});

所以你需要先应用跨度，从“this”中选择找到它：

$("div li").each(function() {   
    $('a', this).wrapInner("<span></span>");        
    if ($(this).find('a span').height() > 10) {
        $(this).addClass('newClass');//adds the class to the li by the way.
    }
});
于 2013-02-19T13:18:17.010 回答
0

将您的 if 条件用大括号括起来，如下所示：

$("div li").each(function() {   
$('a', this).wrapInner("<span></span>");        
    if ($('span', this).height() > 10) {
        $(this).addClass('newClass');
    }
});

http://jsfiddle.net/7Ux2z/

于 2013-02-19T13:18:24.107 回答
0 
if ($('span', this).height() > 10) {
        $(this).addClass('newClass');
    }

您需要将 if 语句条件括在括号中。

于 2013-02-19T13:18:27.523 回答
0

您需要将if语句的条件括在括号中：

if ($('span', this).height() > 10) {
    $(this).addClass('newClass');
}

如果您还没有（听起来您还没有），我建议您学习浏览器的开发人员工具是如何工作的 - 如果您使用的是 Firefox，请安装 Firebug - 这样您就可以自己进行这种基本的 JavaScript 调试.

于 2013-02-19T13:18:42.767 回答
0

您缺少if 条件中的中断 ()

$("div li").each(function() {   
    $('a', this).wrapInner("<span></span>");        
        if ($('span').height() > 10) {
            $(this).addClass('newClass');
        }

});

此外，您在 * li *s之前和之后都缺少 ul 标签

<div>
  <ul>
    <li> <a href="#">link</a> </li>
    <li> <a href="#">link 2</a> </li>
    <li> <a href="#">link 3</a> </li>
  </ul>
</div>

未测试。

于 2013-02-19T13:24:38.703 回答