选择某个元素后面的元素匹配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>');
    }
});

Here is a demo这在行动中。