Выберите элемент, соответствующий идентификатору после определенного элемента, или создайте его, если он не существует

Question

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

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

Как выбрать #nextfoo из функции $('#foo').each()... и, если она не существует, создать ее?

Answer 1

Прежде всего идентификаторы должны быть уникальными на данной странице.Поэтому нет необходимости иметь цикл each для $ ("# foo")

Вы можете использовать метод jQuery next для получения следующего элемента (#nextfoo).Если его нет, вы можете вставить его, используя метод jQuery after.Попробуйте это

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

Answer 2

Как уже говорили другие, каждый идентификатор должен быть уникальным. Итак, если это структура, которую вы хотите повторить ...

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

... и вам не хватает некоторых классов 'nextfoo' после ваших 'foos', тогда вы можете сделать что-то вроде следующего:

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

Вот демонстрация этого в действии.

Answer 3

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

Вы имеете в виду что-то подобное?