如何使用jQuery獲取第n個子值

Question

我得到了這樣的無序列表：

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
</ul>
<div id='output'></div>

我剛剛閱讀了有關javascript中的nth-child的信息，但有一個小問題：如何在輸出div中打印nth-child的值？ 我這樣做，它返回[object HTMLDivElement]

var el=$("ul li:nth-child(2)").val();
  $('#output').text('The second child is: '+el[0]);
  console.log(el);

Answer 1

您可能希望采用文本值：

var el = $("ul li:nth-child(2)").text();

並像這樣輸出：

 $('#output').text('The second child is: ' + el);

Answer 2

 $('#output').text('The second child is ' + $("ul li:nth-child(2)").text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <div id='output'></div> 

Answer 3

您需要讀取li的innerText而不是這種情況下不存在的值。

 var el=$("ul li:nth-child(2)"); $('#output').text('The second child is: '+el[0].innerText); console.log(el[0].innerText); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <div id='output'></div>