开发者社区> 问答> 正文

为何removeClass()在<li>里无效?该如何解决?

<!--

<!DOCTYPE html>
<html>
<head>
  
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>
<style>
.selected{background:yellow;}
</style>
<body>
  <div><span>Hello</span></div>
<ul id=ss>
 <li> <p id=101>Hello Again</p></li>
 <li><p id=102>And Again</p></li>
 <li><p id=103>And Again</p></li></ul>
<input id=s1 type=button value='ww'>
<input id=s2 type=button value='xx'>
<input id=s3 type=button value='xx'>
<script>
$(document).ready(function(){
      $("#s1").click(function(){
          $("#101").addClass('selected').siblings().removeClass('selected');
})});
$(document).ready(function(){
   $("#s2").click(function(){         $("#102").addClass('selected').siblings().removeClass('selected');
})});
$(document).ready(function(){
   $("#s3").click(function(){         $("#103").addClass('selected').siblings().removeClass('selected');
})});
</script>

</body>
</html>

展开
收起
小旋风柴进 2016-05-30 14:31:03 4368 0
1 条回答
写回答
取消 提交回答
  • siblings()方法是查找当前元素周围的兄弟节点,我来分析下你这行代码:

    $("#101").addClass('selected').siblings().removeClass('selected');
    //首先$("#101").addClass('selected')执行以后会返回它本身,也就是$("#101")
    //然后执行$("#101").siblings(),这里就出问题了,你看Id为101的元素它有兄弟元素么?没有!只有它的父元素
    //也就是li标签有2个兄弟节点
    //**所以,正确的写法应该是:**
    $("#102").addClass('selected').parent().siblings().find("p").removeClass('selected');

    //即先拿到li的兄弟节点,然后到li下面去查找p,然后把p的class给remove掉 ,明白?

    2019-07-17 19:20:34
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载