Jquery Добавление элемента за другим, если он еще не существует

Question

Мой дом выглядит так:

<div id="foo">
</div>
<ul>
 <li>...</li>
 <li>..</li>
</ul>

Я выполняю некоторые операции с div #foo и хотел бы проверить, существует ли сразу после него элемент <ul>.Если это так, то я бы хотел добавить к нему <li>.Если это не так, я хочу создать <ul>, добавить к нему <li> и затем поместить его непосредственно после div.

Есть ли способ сделать это в jquery?

Answer 1

if(!$('#foo').next('ul').length) { 
    //not found 
}

Answer 2

Как это:

$(document).ready(function() {
    var $foo = $('#foo'), 
        $ul = $foo.next('ul');

    if ($ul.length) {
        // <ul> exists; add a <li> to it
        $ul.append('<li></li>');
    } else {
        // <ul> does not exist; create one, add a <li> to it,
        // then insert it after #foo
        $foo.after('<ul><li></li></ul>');
    }
});

Для справки:

• .next() захватывает родного брата, который непосредственно следует за данным элементом в его родительском элементе. Вызов jQuery $('#foo').next('ul') работает аналогично селектору #foo + ul.

• Разница между .append() и .after() заключается в том, что .append() добавляет элементы в конец содержимого элемента, тогда как .after() добавляет их непосредственно после закрывающего тега.

Answer 3

if( $("#foo").next().is("ul") ){
    // next element is ul
} else {
    // next element is NOT ul
}

is() возвращает логическое значение (true или false) в зависимости от того, соответствует ли выбранный элемент селектору.Здесь мы выбираем foo div, используем next(), чтобы выбрать элемент, который сразу следует за ним, и проверяем, соответствует ли он селектору "ul".

Answer 4

$(document).ready(function(e){
   $("#foo").click(function(e){
       if($(this).next().get(0).tagName == 'UL'){
           // do something
           // add li to your ul
       }
       else {
           // do something
           //make a ul li
       }
    });
});