Question

我不理解在我的jQuery代码中不起作用的东西。 HTML代码是PHP生成的，所以我需要用jQuery编辑它。这是HTML代码：

<div class="container">
  <li class="cat-item cat-item-6"><a>Biologie</a></li>
  <li class="cat-item cat-item-5"><a>Chimie</a></li>
  <li class="cat-item cat-item-1"><a>Non classé</a></li>
  <li class="cat-item cat-item-3"><a>Physique</a>
    <ul class='children'>
      <li class="cat-item cat-item-4"><a>Physique quantique</a></li>
    </ul>
  </li>
</div>

我想要的是为具有＆＃34; cat-item＆＃34;的元素添加特定的css类。 css班，但其父母没有孩子＆＃34; css课。这是我的jQuery代码：

    if( $(".cat-item").parent().hasClass("children") == false) {
      $(this).addClass( "list-group" );
    }

我不明白为什么它不起作用。代码

$(".cat-item").addClass( "list-group" );

有效，所以我确信（或非常肯定）它是parent（）或hasClass（）函数的问题。

Answer 1

你用什么函数if有条件的？如果您将其放在$(document).ready()内，$(this)将为$(document)

使用该逻辑，您应该在附加到if的函数中使用li

我在下面使用变量制作了一个解决方案，因此更容易理解你是什么：）

还在ul结构中添加了html，但遗漏了这些内容（小心）

请参阅下面的代码段

var cat = $("ul li.cat-item") // getting the li with class .cat-item
 $(cat).each(function() { // looping through all .cat-item elements
   var parentUL = $(this).parent("ul") // getting the parent of each li.cat-item 

   if (!$(parentUL).hasClass("children")) { //check if the parent doesn't have class children
     $(this).addClass("list-group"); //if YES > addClass to that li whose parent doesn't have class .children
   }
 })

.list-group > a {
  color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li class="cat-item cat-item-6"><a>Biologie</a></li>
    <li class="cat-item cat-item-5"><a>Chimie</a></li>
    <li class="cat-item cat-item-1"><a>Non classé</a></li>
    <li class="cat-item cat-item-3"><a>Physique</a>
      <ul class='children'>
        <li class="cat-item cat-item-4"><a>Physique quantique</a></li>
      </ul>
    </li>
  </ul>
</div>

编辑。不知道为什么你会想要这个。如果您想要这样，那么您可以使用:not(.class) > li

来设置那些可以轻松使用CSS的样式。

Answer 2

你的代码说如果.cat-item的第一个父级没有一个类，那么就要将一个类添加到某个东西（每个范围都是这个）。

如果要将类添加到不包含在类中的lis的类，而不是选择那些类。

＆＃13;

$(".container ul")  //select the uls
  .not("ul.children")  //filter out the ones with the class
    .find("> .cat-item")  //select the direct descendants
      .addClass( "list-group" );  //add the class

＆＃13;

li {
   background-color: lime;
}

.list-group {
    background-color: yellow
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li class="cat-item cat-item-6"><a>Biologie</a></li>
    <li class="cat-item cat-item-5"><a>Chimie</a></li>
    <li class="cat-item cat-item-1"><a>Non classé</a></li>
    <li class="cat-item cat-item-3"><a>Physique</a>
      <ul class='children'>
        <li class="cat-item cat-item-4"><a>Physique quantique</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

如果父母有班级没有工作

2 个答案: