如何从JavaScript/jQuery重新呈现页面？

我不太确定这是否是正确的表达方式，但这里是

如您所见，非常简单的代码：

<div class="first"></div>
<div></div>

我想要实现的是：

单击第一个类的

div

，它将用同级元素交换该类

单击同级元素，它会将其交换回来，因此只需围绕2个元素交换类

这里的问题是，它只在第一次正确工作，第二次当新元素通过

addClass

接收到类时，jQuery没有通过第一次页面加载识别出它包含了类？我如何解决这个问题

---

我做了一个

console.log（111）

只是为了确保，而且确保只有当我在第一次交换后单击黑色的

div时它才会触发（该div不应再具有第一个类）
一种快速而简单的方法是：


$（文档）.ready（函数（）{
var first=$（'.first'）；
var second=first.next（）；
首先，单击（功能（e）{
e、 预防默认值（）；
first.removeClass（'first'）；
第二，addClass（'first'）；
});
第二，点击（功能（e）{
e、 预防默认值（）；
第二，removeClass（“第一”）；
first.addClass（'first'）；
});
});
div{
背景色：黑色；
高度：100px；
宽度：100px；
边缘底部：10px；
}
.首先{
背景颜色：绿色；
}
要实现此行为，可以在元素包装器上使用委派事件

$(document).delegate('.first', 'click', function(e){
    e.preventDefault();
    console.log(123);
    $(this).removeClass('first');
   $(this).siblings().addClass('first');
})

您所需要做的就是将这两个项推入一个数组中，然后在单击时在索引之间切换


var elems=[]；
$（文档）.on（“单击”、“.first”，函数（事件）{
elems=elems.length==0？[event.originalEvent.target，$（event.originalEvent.target）.next（）]：elems；
$（elems[event.originalEvent.target==elems[0]？1:0]）.addClass（“第一”）；
$（elems[event.originalEvent.target==elems[0]？0:1]）.removeClass（“第一”）；
});
。首先{
颜色：红色；
}

x
y
我认为JQuery无法在没有明确指示的情况下重新分析DOM。在文档就绪时，只有第一个div具有类“first”，并且它保持这种状态。您可以尝试使用一个函数来解析所有DOM，以搜索“first”类。在这种情况下，Vanilla JS可能更有效。您需要将jquery添加到您的沙盒演示中。这也不是解决这个问题的真正方法。@JonSG我解决了这个问题，我提到这是最好的解决方案。我更新了我的答案如果你只有两个孩子，这就是你看到的答案。你用
e.preventDefault（）
阻止的默认操作是什么？只是一个复制粘贴，以最小化问题和答案之间的差异。