JQuery,关于end()的提问！！！！！


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    ul{list-style:none;}
    .header{background-color:green}
    .body{background-color:White;}
    </style>
    <script src="../JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#qq li").addClass("header").css("cursor", "pointer").children().hide()
            .end()
            .click(function () {
                $(this).children().addClass("body"). //设置body样式 ,没效果
                show()
                .end().siblings().children().hide();//其他节点子节点隐藏
            });        });
    </script>
</head>
<body>
 <ul id="qq">
   <li>朋友
      <ul>
        <li>朋友1</li>
         <li>朋友2</li>
          <li>朋友3</li>
      </ul>
  </li>
   <li>亲戚
    <ul>
        <li>亲戚1</li>
         <li>亲戚2</li>
          <li>亲戚3</li>
      </ul>
    </li>
   <li>陌生人
     <ul>
        <li>陌生人1</li>
         <li>陌生人2</li>
          <li>陌生人3</li>
      </ul>
   </li>
 </ul>
</body>
</html>end()貌似没用错吧，为什么样式body使用不了

解决方案 »

  1.   

    估计你得看看addClass()返回啥，css()返回啥。凡事不返回包装element的jquery对象，就需要一个end()，end()就是结束当前操作，返回包装对象，提供简便的链式调用
      

  2.   

    我觉得很混乱的逻辑啊。。这样写可读性太差了
    你body属性想设置给谁
      

  3.   


    $(this).children().addClass("body") //body是想设给$(this)的子节点，即隐藏了的ul内容
     
      

  4.   

    你用firxfox 查看 body样式只给了 ul 
      

  5.   


    呃，对jquery不了解。觉得可能需要一个遍历,比如：
    $(this).children().each(function(i){
        $(this).addClass("body");
    })先声明，纯属伪代码，我还不知道children()返回的是个啥东东，如果是我设计，返回集合的话就带着一个each方法
      

  6.   


            $(function () {
                $("#qq > li").addClass("header").css("cursor", "pointer").children().hide()
                .end()
                .click(function () {
                    $(this).children().addClass("body"). //设置body样式 ,没效果
                    show()
                    .end().siblings().children().hide();//其他节点子节点隐藏
                });        });
    楼主 这个意思？
      

  7.   

    end没用错，但$("#qq li")写错了，应该写成$("#qq>li")，还有，建议不要写这么长的表达式，可读性太差
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
        ul{list-style:none;}
        .header{background-color:green}
        .body{background-color:White;}
        </style>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("#qq>li").addClass("header").css("cursor", "pointer").children().hide()
                .end()
                .click(function () {
                    $(this).children().addClass("body"). //设置body样式 ,没效果
                    show()
                    .end().siblings().children().hide();//其他节点子节点隐藏
                });
            });
        </script>
    </head>
    <body>
    <ul id="qq">
    <li>朋友
    <ul>
    <li>朋友1</li>
    <li>朋友2</li>
    <li>朋友3</li>
    </ul>
    </li>
    <li>亲戚
    <ul>
    <li>亲戚1</li>
    <li>亲戚2</li>
    <li>亲戚3</li>
    </ul>
    </li>
    <li>陌生人
    <ul>
    <li>陌生人1</li>
    <li>陌生人2</li>
    <li>陌生人3</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
      

  8.   

    $("#qq > li")只选择 #qq 的儿子 li楼主 看看 jquery api吧
      

  9.   


    css选择器中，查找直接子元素。
      

  10.   

    $("#qq > li")表示查找#qq的直接子元素li
    $("#qq li")表示查找#qq的所有li子元素