jqueryのリスト項目の一番上の親のテキストを取得するには？

Question

次のデザインはul listです。

​​

「CSS」アイテムをクリックすると、親のテキスト、つまり「デザイン」を取得したいと考えています。 次のコードを試しましたが、その中にリスト全体があります。

$('ul').on("click", "li", function (e) { 
    console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text()); 
}); 

Answer 1

$(this).parents(".category")[0].childNodes[0].textContent; 

のchildNodesでこの部分

$(this).parents(".category").text() 

を交換して、テキストノードを含むすべての子要素を返します試してみてください。

あなただけのjQueryを使用したい場合は、スパン内

<ul> 
    <li class="category"> 
     <span>Design</span> 
     <ul> 
      <li>Graphic Design</li> 
      <li>Web Design </li> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>Print</li> 
     </ul> 
    </li> 
    <li class="category"> 
     <span>Development</span> 
     <ul> 
      <li>PHP</li> 
      <li>Java</li> 
     </ul> 
    </li> 
</ul> 

このtextnodeをラップし、別のアプローチは、のcontentsとfilterを使用することができ

$(this).parents(".category span").html() 

を使用して、その最初のノードのテキストを取得jquery

$(this).parents(".category").contents().filter(function() { 
    return this.nodeType == 3; 
}).nodeValue; 

Answer 2

変更：

console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text()); 

：

console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parent().text());