Question

我是Jquery的新手。假设我有一个列表，我想根据这些直接li元素是否在其死者中具有某个类别来排除该列表中的直接孩子，即第一个li。

例如，我想从列表中排除直接li元素＆＃34;＃mainList＆＃34;有一个名为＆＃34; hello＆＃34;的类的死者。我想排除第二个列表项。

我尝试使用has功能但只选择了我要排除的项目。然后我尝试使用not函数。谢谢，我将不胜感激。

＆＃13;

$('#mainList > li').has('.hello');
$('#mainList > li').not(function() {
  return $(this).has('.hello');
});

＆＃13;

<ul id="mainList">
  <li>mainItem1</li>
  <li>mainItem2
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5
        <ul>
          <li>Item1</li>
          <li>Item2</li>
          <li>Item3</li>
          <li>Item4</li>
          <li class="hello">Item5</li>
          <li>Item6</li>
        </ul>
      </li>
      <li>Item6</li>
    </ul>
  </li>
  <li>mainItem2</li>
  <li>mainItem3</li>
  <li>mainItem4</li>
  <li>mainItem5</li>
  <li>mainItem6</li>
</ul>

＆＃13;

Answer 1

您可以使用jquery filter()功能 - 请参阅下面的演示：

＆＃13;

$('#mainList > li').filter(function(){
  return !$(this).find('li.hello').length;
}).css('color','red');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainList">
  <li>mainItem1</li>
  <li>mainItem2
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5
        <ul>
          <li>Item1</li>
          <li>Item2</li>
          <li>Item3</li>
          <li>Item4</li>
          <li class="hello">Item5</li>
          <li>Item6</li>
        </ul>
      </li>
      <li>Item6</li>
    </ul>
  </li>
  <li>mainItem2</li>
  <li>mainItem3</li>
  <li>mainItem4</li>
  <li>mainItem5</li>
  <li>mainItem6</li>
</ul>

＆＃13;

Answer 2

jQuery有一些你可以使用的特殊CSS伪选择器。为此，您可以使用：与.not（）方法结合使用：

＆＃13;

$('#mainList > li').not(':has(.hello').css('color', 'red');

＆＃13;

<ul id="mainList">
  <li>Item0</li>
  <li>Item1
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5
        <ul>
          <li>Item1</li>
          <li>Item2</li>
          <li>Item3</li>
          <li>Item4</li>
          <li class="hello">Item5</li>
          <li>Item6</li>
        </ul>
      </li>
      <li>Item6</li>
    </ul>
  </li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
</ul>

＆＃13;

Answer 3

尝试children：

＆＃13;

$('#mainList li').children(':not(.hello)').css('color','red');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainList">
  <li class="hello">Item0</li>
  <li>Item1
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5

        <ul>
          <li>Item1</li>
          <li>Item2</li>
          <li>Item3</li>
          <li>Item4</li>
          <li class="hello">Item5</li>
          <li>Item6</li>
        </ul>

      </li>
      <li>Item6</li>
    </ul>
  </li>

  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
</ul>

＆＃13;

Jquery - 根据子类下行网中是否存在类来排除元素？

3 个答案: