Question

在我的程序中，我有未排序的列表，它已经排序了lists.Requirement就像单击子排序列表中应该打开的无序列表元素一样：

以下是我写的代码：

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="E:\development\JSPProject\jquery-2.1.4.js">
      </script>

      <script type="text/javascript">

         $(document).ready(function() {

             $(".GChild").hide();
             $(".child").click(function()
                     {
                 $(".GChild").show();}
                 ); 
             })


      </script>
   </head>
   <body>
   <h3>Welcome </h3>
   <div>
   <ul class="parent">
   <li class ="child">Numbers
   <ol><li class="GChild">one</li><li class="GChild">two</li></ol>
   <li class ="child">Alphabets<ol><li class="GChild">A</li><li class="GChild">B</li></ol></li></ul>
   </div></body>
</html>

所以在这里当我点击Numbers时，其他列表也会显示出来。我知道我没有指定任何特定于该列表的内容。我尝试添加此行

$(this).filter(".GChild").show();

而不是
$(".GChild").show();

但是它不起作用。我是JQuery的新手，所以请不要介意它是否是愚蠢的问题。我有什么方法可以实现“点击（数字）它应该显示一个和两个--- -----以同样的方式使用Alpha - > A，B

Answer 1

您只想找到您点击的当前孩子的孩子.GChild。 filter无效，因为通过您传入的选择器减少一组元素。在您的情况下，它是说将当前child过滤到一个集合这也是.GChild。

您正在寻找jQuery find，它会查找与您的选择器匹配的当前节点的所有后代。将代码更改为如下所示：

$(document).ready(function() {
  $(".GChild").hide();
  $(".child").click(function() {
    $(this).find(".GChild").show();
  }); 
});

Answer 2

这是一个JSFiddle，具有您想要的功能。

这是代码：

$(document).ready(function() {
    $(".child").click(function(){
        $(this).children().find('.GChild').toggle();
    })
})

<强> HTML

<h3>Welcome </h3>
   <div>
   <ul class="parent">
       <li class ="child">Numbers
           <ol>
               <li class="GChild">one</li>
               <li class="GChild">two</li>
           </ol>
        </li>
       <li class ="child">Alphabets
           <ol>
               <li class="GChild">A</li>
               <li class="GChild">B</li>
           </ol>
        </li>
    </ul>
   </div>

Answer 3

试试这个：

$(this).find('ol').show();

演示here。

如何在html列表中使用JQuery click方法

3 个答案: