jQuery的添加元素层出不穷,如果它不存在
问题描述:
我的DOM的样子:jQuery的添加元素层出不穷,如果它不存在
<div id="foo">
</div>
<ul>
<li>...</li>
<li>..</li>
</ul>
我用“#foo”格执行一些操作,并想如果<ul>
元素测试直接存在于它之后。如果是这样,那么我想附加一个<li>
它。如果它不是,我想创建一个<ul>
追加<li>
它,然后将其直接放在div后面。
有没有一种方法可以在jQuery中做到这一点?
答
像这样:
$(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>');
}
});
参考:
答
if($("#foo").next().is("ul")){
// next element is ul
} else {
// next element is NOT ul
}
is()
取决于所选择的元件是否选择匹配返回一个布尔(真或假)。在这里,我们选择foo
div,使用next()
来选择立即成功的元素,并检查它是否与选择器"ul"
匹配。
答
if(!$('#foo').next('ul').length) {
//not found
}
答
$(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
}
});
});