Question

我的dom看起来像：

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

我正在使用'#foo'div执行某些操作，并希望测试后面是否存在<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
       }
    });
});

Jquery如果元素已经存在，则添加一个又一个元素

4 个答案: