Question

我想让所有这些li元素在ul中都有类show-skill，然后我想删除以前的类并为其添加新类，我该如何实现呢。

<div>   
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
 </ul>  
</div>

<label> 
    <a href="#" onclick="get_li(this);">
</label>    

</div>

var abc = $(obj).parent().parent().children(':first-child').hasClass('show-skill');
$(abc).removeClass().addClass('new_class');

我必须通过父方式的父方式，因为有许多记录带有相同的名称，我希望对我唯一一个点击而不是其他人的记录生效，我希望为所有人提供一个代码。< / p>

Answer 1

我为你创建了一个JSFiddle。

<强> HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li class="show-skill">sdfkjd</li>
  <li class="show-skill">sdfkjd</li>
  <li class="show-skill">sdfkjd</li>
  <li class="show-skill">sdfkjd</li>

测试

<强>的jQuery

$(".myBtn").click(function(){
    $("ul li.show-skill").removeClass("show-skill").addClass("test");
});

我添加了一个CSS类，以便可以观察到更改。

<强> CSS

.test{
  background-color:blue;
}

如果有帮助，请告诉我。

Answer 2

我会像这样添加点击功能

HTML

<button onclick="myFunction()">Click me</button>

的jQuery

function myFunction() {
     $('ul li.show-skill').removeClass('show-skill').addClass('newclass');
  }

或者我会点击

使用jQuery

$('.button').on('click',function(){
    $('ul li.show-skill').removeClass('show-skill').addClass('newclass');
})

Answer 3

请参阅更新的代码，谢谢

function get_li(obj){
$('#'+obj + ' li').each(function() {
  if($( this ).hasClass('show-skill'))
    $( this ).removeClass('show-skill').addClass( 'new_class' );
});
console.log($('#'+obj + ' li'));

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >   
  <ul id="listEle">
    <li></li>
    <li></li>
    <li></li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
    <li class="show-skill">sdfkjd</li>
 </ul>  
</div>

<label> 
    <a href="#" onclick="get_li('listEle');">click</a>
</label>    

</div>

Answer 4

您尝试使用的.parent()选择器在给定的HTML中不起作用，因为点击的链接不会与您想要操作的ul共享父级。

假设在现实生活中是共享的父元素，最好的方法是使用.closest() - 将多个.parent()个调用链接在一起非常脆弱，因为如果你改变HTML结构它会破坏。在返回的路上也是一样的：使用.find()获取所有匹配的包含元素的列表，而不是将子调用链接在一起。

var get_li = function(anchor) {
  $(anchor)
    .closest('.sharedparent')   // gets container
    .find('li.show-skill')      // gets all contained .show-skill elements
    .removeClass('show-skill')  // removes class
    .addClass('new-class');     // adds new class
}

.show-skill {
  background-color: #F00
}

.new-class {
  background-color: #0F0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sharedparent">
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li class="show-skill">sdfkjd</li>
      <li class="show-skill">sdfkjd</li>
      <li class="show-skill">sdfkjd</li>
      <li class="show-skill">sdfkjd</li>
    </ul>
  </div>
  <label> 
    <a href="#" onclick="get_li(this);">click</a>
  </label>
</div>

（更好的是，如果可能的话，将在父元素上放置一个特定的ID或类名，并根据它进行调用而不是使用相对DOM遍历 - 使用相对遍历的唯一原因是如果你有多个容器，每个容器应分别使用相同的行为。）

如何获得所有li元素在ul中具有类show-skill

4 个答案: