jQuery的添加元素层出不穷，如果它不存在

我的DOM的样子：jQuery的添加元素层出不穷，如果它不存在

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

我用“#foo”格执行一些操作，并想如果<ul>元素测试直接存在于它之后。如果是这样，那么我想附加一个<li>它。如果它不是，我想创建一个<ul>追加<li>它，然后将其直接放在div后面。

有没有一种方法可以在jQuery中做到这一点？

来源

2012-02-25 9-bits

像这样：

$(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()直接其结束标记之后添加它们。

来源

2012-02-25 05:26:24 BoltClock

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

is()取决于所选择的元件是否选择匹配返回一个布尔（真或假）。在这里，我们选择foo div，使用next()来选择立即成功的元素，并检查它是否与选择器"ul"匹配。

来源

2012-02-25 05:24:49 Purag

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

来源

2012-02-25 05:25:50 elclanrs

$(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 
     } 
    }); 
});

来源

2012-02-25 05:30:49

jQuery的添加元素层出不穷，如果它不存在

回答

相关问题