如何通過jQuery獲取第一個dom元素或文本字符串？

使用下面的示例標記：如何通過jQuery獲取第一個dom元素或文本字符串？

<ul> 
    <li><div>Hello</div>World</li> 
    <li>Hello World 
     <ul> 
      <li style="voice-family: dizzy">What a wonderful world</li> 
     </ul> 
    </li> 
    <li><a href="hello.html">Hello World</a> 
     <ul> 
      <li>Goodbye world</li> 
     </ul> 
    </li> 
</ul>

我試圖創建一個jQuery選擇將抓住每一個頂級LI是不是一個div的第一要素，但也可以是任意其他的DOM元素或文本字符串。

因此，運行它針對上述情況，我想返回3個元素：

世界
的Hello World
<a href="hello.html">Hello World</a>

假設我已經創建了一個選擇器抓住每一個頂級的LI（我們稱之爲$ topLevelLIs）我想出了這個：

$topLevelLIs.find("*:first:not(div)")

唉，你可能會看到，只會返回一個dom元素，因此，只會在選項＃3中找到一些東西。前兩個只是空的返回。

有沒有辦法做到「抓住第一個DOM元素或抓住第一個文本字符串在下一個DOM元素之前」的邏輯？

SOLUTION：

感謝拉斯和馬克的幫助下，我結束了使用這最終得到節點的類型，然後我可以在充當：

$topLevelLIs.contents(":not(div)") 
    .filter(function(index) { 
     return index == 0 
    }).get(0).nodeType

來源

2009-12-31 DA.

假設你有一個選擇，以確定頂部<ul>的<li>元素（我將使用本例中的ID top）時，你可以使用$.map實用功能，讓你在做什麼了。喜歡的東西

var children = $.map($('#top > li'),function(n,i) { 
    var child = n.firstChild; 
    while (child && child.nodeType === 1 && child.nodeName === 'DIV') 
    { 
    child = child.nextSibling; 
    } 
    return child && child.nodeType === 3? 
    child.textContent : child; 
}); 

console.log(children); // will print out the elements you want 
         // to the console in firebug

這也將要處理<li>元素的出現，沒有文字（或子元素）。

來源

2009-12-31 18:00:30

謝謝，拉斯。這是非常有幫助和徹底的。一定會派上用場！ – 2009-12-31 19:23:02

你不能使用jQuery的選擇器語法返回文本節點。你必須做一些更復雜的事情。 This StackOverflow問題應該給你你需要的東西。請記住，如果你需要這個在IE中工作，你必須使用數字3而不是Node.TEXT_NODE。

來源

2009-12-31 17:22:29

謝謝，馬克！我很希望看到未來的jQuery允許通過選擇器選擇文本節點。 – 2009-12-31 19:23:45

你不能真正「選擇」文本（不是廣泛接受的術語）;你的意思是，在沒有<div>的情況下，你只是想選擇包裝<li>？

這將選擇所有<div>元素均<li>中的第一要素：

$('li div:first-child');

或者，你可以只選擇<li>包含一個<div>元素作爲第一個孩子的：

$('li').filter('li div:first-child');

來源

2009-12-31 19:28:50 James

如何通過jQuery獲取第一個dom元素或文本字符串？

回答

相關問題