Question

我不能在这里使用.children（），因为它们在技术上不是孩子所以不会起作用。用这个作为我的HTML，

    <p class="l1">A</p>
      <p class="l2">A1</p>
      <p class="l2">A2</p>
      <p class="l2">A3</p>
      <p class="l2">A4</p>
        <p class="l3">A41</p>
      ...

我要做的就是在p.l2之后跟踪所有p.l1元素，直到它到达另一个p.l1。代码折叠排序，但没有嵌套子代。我无法弄清楚如何做到这一点。

我现在得到的东西不起作用，似乎挂了浏览器。似乎没有.descendents（）函数

    $('p.l1').live('click', function()
    {
      var topobj = $(this);
      var done = true;
      while(done)
      {
        if($(topobj).next().hasClass('l2'))
        {
          $(topobj).next().slideToggle(100);
          topobj = $(topobj).next();
        }
        else if($(topobj).next().hasClass('l1'))
          done = false;
      }
    });

这似乎失败了，因为它给出了一个元素而不是一组元素。真的不知道如何实现这个......

Answer 1

您必须使用nextUntil。它会从您传递的元素中找到下一个元素，直到它达到与您传递给它的选择器匹配的内容。

$(".l1").click(function() {
    $(this).nextUntil(".l1").toggle()
})

Demo

请考虑使用嵌套的<ul>和<li>。

祝你好运！

Answer 2

听起来像你想要nextAll，它可以让你抓住所有以下与选择器匹配的元素。见http://api.jquery.com/nextAll/

另外，我认为它失败了，因为你的else if应该是：

else if($(topobj).next().hasClass('l3'))
                                 // ^---- l3 instead of l1

（除非在某个地方有一个错字，你说你希望它继续下去，直到找到另一个l1，但没有）

另外，请参阅以下有关nextUntil的评论中Intelekshual发布的内容。这可能是你想要的。

Answer 3

nextUntil是您需要的遍历功能：

$('p.l1).nextUntil('p.l1')

Answer 4

实现目标有两种显而易见的方法，尽管后代元素要容易得多。

选项一：

$('p.l1').click(
    function(){
        $('p.l2').slideToggle();
    });

JS Fiddle demo

选项二：

$('p.l1').click(
    function(){
        $(this).nextUntil('p.l3').slideToggle();
    });

JS Fiddle demo

选项三：

尝试使其更通用：

$('p[class^="l"]').click(
    function(){
        var thisLevel = parseInt($(this).attr('class').replace('l',''), 10);
        var nxtLevel = (thisLevel + 1);
        $('p.l' + nxtLevel).slideToggle();
    });

JS Fiddle demo

选项四：

稍微更多通用：

$('p[class^="l"]').click(
    function(){
        var thisLevel = parseInt($(this).attr('class').replace('l',''), 10);
        var nxtLevel = (thisLevel + 1);
        var prvLevel = (thisLevel - 1);
        $('p').nextUntil('p:not("p.l' + nxtLevel + '")').slideToggle();
    });

JS Fiddle demo

Answer 5

你也必须检查l3。只需!$(topobj).next().hasClass('l1')：

http://jsfiddle.net/zeb5F/

jquery切换“孩子”

5 个答案: