Question

我在html中有未排序的列表。有些li有一个class="checked"。如果li元素包含class='checked'，则应该隐藏li元素内的范围。

我的例子：

$('ul li').each(function(){
    if($(this).attr('class') == 'checked'){
        $('li span').hide();
    }
});

<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

但是我的代码隐藏了每个列表元素。为什么会这样？

Answer 1

这样做会更有效：

$('ul li.checked span').hide();

另外，请考虑使用纯CSS：

ul li.checked span {
    display: none;
}

Answer 2

使用$(this)

＆＃13;

 $('ul li').each(function(){
        if($(this).attr('class') == 'checked'){
          $(this).find('span').hide(); // If want to hide only span
          //$(this).hide(); // if want to hide li
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

＆＃13;

Answer 3

在您的代码中$('li span')将选择所有元素，而不是在当前元素中选择span。

$('span', this).hide();
// or
$(this).find('span').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
    $('ul li').each(function(){
        if($(this).attr('class') == 'checked'){
            $('span',this).hide();
        }
    });
</script>

＆＃13;

此外，使用hasClass()方法检查元素是否具有某个类更好，因为该元素可能有多个类。

$('ul li').each(function(){
    if($(this).hasClass('checked')){
        $('span', this).hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
  $('ul li').each(function() {
    if ($(this).hasClass('checked')) {
      $('span', this).hide();
    }
  });
</script>

＆＃13;

您的代码中没有必要使用each()方法，您可以通过使用类更新选择器来缩减为单行。

$('ul li.checked span').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>
<script>
  $('ul li.checked span').hide();
</script>

＆＃13;

Answer 4

＆＃13;

$('ul li.checked span').hide()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
  <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
  <li id="item-3"><span class='priorityValue'>3</span></li>
  <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

＆＃13;

不需要迭代只需找到已检查类的li然后找到span然后隐藏

Answer 5

您正在使用选择器隐藏所有范围。在与您交互的当前元素中查找范围

＆＃13;

$('ul li').each(function(){
    if($(this).hasClass('checked')){
        $(this).find('span').hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="checked" id="item-1"><span class='priorityValue'>1</span></li>
    <li class="checked" id="item-2"><span class='priorityValue'>2</span></li>
    <li id="item-3"><span class='priorityValue'>3</span></li>
    <li id="item-4"><span class='priorityValue'>4</span></li>
</ul>

＆＃13;

编辑：由于Mohammad的评论，我建议检查一下该元素是否有一个已检查的类，而不是检查整个类的属性

Answer 6

$('li.checked span').hide();

您可以使用上述代码，此功能不需要每个功能

如何使用jquery操作html列表

6 个答案: