jQuery将类添加到第1-3个匹配元素

背景

我有一个由四个绝对定位的div“象限”组成的布局，如下所示：

div.quadrant#one    |     div.quadrant#two
height: 25%;        |     height: 25%;
width: 25%;         |     width: 25%;
                    |
__________________________________________

div.quadrant#three  |    div.quadrant#four
height: 25%;        |    height: 25%;
width: 25%;         |    width: 25%;
                    |

HTML

我已经把那件工作好了，没问题。这就是我被难倒的地方：

问题

我还尝试使用

.addClass

向三个

div.closed

元素添加另一个类，具体取决于它们是第一个

div.closed

、第二个还是第三个。如果div是第一个类为“closed”的div，我还想添加

.top

；如果是第二个，我想添加

.middle

；如果是第三个，我想添加

.bottom

我试图通过使用

：eq（1）

、

：eq（2）

和

：eq（3）

来实现这一点但是，只有单击

div#one

或

div#two

之后的

div.closed

象限似乎不受影响时，它才起作用。下面是代码：

$( 'div.quadrant' ).click(function() {  
  $(this).addClass('open'); 
  $(this).parent().children('div.quadrant').not('.open').addClass('closed');  
});

$(this).parent().children('div.quadrant').not('.open').addClass('closed');
$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top');
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle');
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom');

这是一个JS垃圾桶：

---

我链接这些函数的方式是否有问题？感谢您的帮助

您可以创建jQuery对象，然后对jQuery对象中的不同项执行不同的操作，如下所示

在我看来，您还需要清理之前的状态（之前的打开、关闭、顶部、中间、底部），如下所示：

$( '.quadrant' ).click(function() {  
    var self = $(this);

    // clear prior state
    var all = self.parent().find(".quadrant").removeClass("open closed top middle bottom");

    // mark the clicked on one as open
    self.addClass("open");

    // mark all other ones as closed
    var closed = all.not(this).addClass("closed");

    // now mark each closed one separately
    closed.eq(0).addClass("top");
    closed.eq(1).addClass("middle");
    closed.eq(2).addClass("bottom");
});

---

您遇到的问题是没有正确理解：eq（）选择器和.not（）函数的作用

$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top');
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle');
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom');

这在jsbin链接中提供的代码中所做的是

选择标记中的第二个div.quadrant元素（即#2）

如果它的类不是.open，则将.top类添加到它

选择标记中的第三个div.quadrant元素（三）

如果它的类不是.open，则将.middle类添加到它

选择标记中的第四个div.quadrant元素（四）

如果它的类不是.open，则将.bottom类添加到它

---

我知道你想做什么，但那不是最好的方法。这个问题的最佳解决方案是以一种可重复的、更面向对象的方法来解决这个问题，就像jfriend00建议的那样。

谢谢，效果很好——我曾试图让您的早期版本能够将.closed象限变为.open象限，但代码做得很好，而且更简洁

$(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top');
$(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle');
$(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom');