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的添加元素層出不窮，如果它不存在

回答

相關問題