Question

这是我的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应用于它。

Answer 1

试试这个

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

});

Answer 2

此代码中没有范围：

$("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.
    }
});

Answer 3

将你的if条件包含在大括号中，如下所示：

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

http://jsfiddle.net/7Ux2z/

Answer 4

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

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

Answer 5

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

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

如果您还没有（并且听起来没有），我建议您了解浏览器的开发者工具是如何工作的 - 如果您使用的是Firefox，install Firebug - 那么您可以这样做为您自己进行基本的JavaScript调试。

Answer 6

如果条件

，您缺少中断（）

$("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>

未经测试。

如果有条件的话不能在jQuery中使用每个函数

6 个答案: