选择某个元素后面匹配ID的元素，如果不存在则创建

Question

<div id="foo">
  FOO
</div>

<div id="nextfoo"></div>

如何从 $('#foo').each()... 函数中选择 #nextfoo，如果它不存在则创建它？

Answer 1

var nextFoo= $('#nextfoo');
if (!nextFoo.length){
    nextFoo=$('<div id="nextfoo"/>').insertAfter('#foo');
}

你的意思是这样的吗？

Answer 2

首先，id 在给定页面上应该是唯一的。因此不需要在 $("#foo") 上使用 each 循环，

您可以使用 jQuery next 方法来获取下一个元素(#nextfoo)。如果它不存在，那么您可以使用 jQuery after 方法插入它。试试这个

if(!$("#foo").next().is('#nextfoo')){
    $("#foo").after('div id="nextfoo" />');
}
else{//It exists
    var nextfoo = $("#foo").next();
}

Answer 3

正如其他人所说，每个 id 都应该是唯一的。因此，如果您希望重复这个结构......

<div class="foo"></div>
<div class="nextfoo"></div>

并且您在“foos”之后缺少一些“nextfoo”类，那么您可以执行如下操作：

$('.foo').each(function() {
    if (!$(this).next().hasClass('nextfoo')) {
        $(this).after('<div id="nextfoo">nextfoo 2</div>');
    }
});

这是一个实际演示。