Question

说明：我的代码如下。我用正确的索引标记了它们。我知道第一个ul标签是索引0，第二个是索引1.我知道li在每个ul中都是索引0 - 5。我将这些设置为按钮，因此当您单击它们时，它会删除一个CSS类，然后添加另一个CSS类。但是由于范围，如果我点击第二个UL中的第一个孩子（或索引1 UL，如下面标记），我不能通过使用next（）或prev（更改）改变第一个UL（索引0 UL）最后一个孩子的类别）。

问题：如果我点击索引0 LI（在索引1 UL中）如何更改索引0 UL的索引5 LI和/或索引4 LI的类别？

<ul> (Index 0 UL>)
<li><li> (Index 0 LI>)
<li><li> (Index 1 LI>)
<li><li> (Index 2 LI>)
<li><li> (Index 3 LI>)
<li><li> (Index 4 LI>)
<li><li> (Index 5 LI>)
</ul>
<ul> (Index 1 UL>)
<li><li> (Index 0 LI>)
<li><li> (Index 1 LI>)
<li><li> (Index 2 LI>)
<li><li> (Index 3 LI>)
<li><li> (Index 4 LI>)
<li><li> (Index 5 LI>)
</ul>
<ul> (Index 2 UL>)
<li><li> (Index 0 LI>)
<li><li> (Index 1 LI>)
<li><li> (Index 2 LI>)
<li><li> (Index 3 LI>)
<li><li> (Index 4 LI>)
<li><li> (Index 5 LI>)
</ul>

感谢您的帮助。

韦恩

Answer 1

您可以使用以下插件方法：

jQuery.extend(jQuery.fn, {
    nextSiblingOrCousin: function() {
        var $next = this.next();
        if ($next.length == 0) {
            $next = this.parent().next().children(':first');
        }
        return $next;
    },

    prevSiblingOrCousin: function() {
        var $prev = this.prev();
        if ($prev.length == 0) {
            $prev = this.parent().prev().children(':last');
        }
        return $prev;
    }
});

通过这些，您只需将所有来电更改为.prev()和.next()至.prevSiblingOrCousin()和.nextSiblingOrCousin()。

Demo on jsfiddle

注意：之前我认为每个<div>周围都有一个<ul>，但我发现你没有{{1}}。

Answer 2

我已经弄明白了。看来parent（）。prev（）将允许我与前一个父母和

交谈

parent（）。prev（）。find（'li：last-child'）将允许我与最后一个孩子交谈。我在维基中也读到了一些名为nth-last-child-type（或类似）的内容，它允许我与上一个父母中的任意数量的元素进行对话，从最后一个开始并倒计时。

韦恩

       if($(this).index()<2) { // Only do this if the button clicked on is indexed at 0 or 1
          if($(this).parent().index()!=0) { // Ensure we are not at the first parent index
            if(!$(this).parent().prev().find('li:last-child').hasClass('whatever')) { // Look for the correct class 
              alert("Current Index: "+$(this).parent().index());
              alert("Previous Parent Index: "+$(this).parent().prev().index());
              alert("Previous Index Last Child: "+$(this).parent().prev().find('li:last-child').index());
            }
          }
       }

Jquery：更改不同ul li部分的类

2 个答案: