javascript - html リスト項目のテキストのみを JavaScript 配列に格納し、画像 src も格納しない

Question

HTMLには、次のようなアイテムを含む順序付けられていないリストがあります

<ul id="sortable">
<li class="ui-state-default"><img src="images/john.jpg">John</li>
<li class="ui-state-default"><img src="images/lisa.jpg">Lisa</li>
<li class="ui-state-default"><img src="images/bill.jpg">Bill</li>
<li class="ui-state-default"><img src="images/sara.jpg">Sara</li>
</ul>

選択したアイテムの名前を配列に保存したいのですが、選択が正常に機能しています。問題は、名前だけでなく img src も保存することです。

これは、配列にデータを入力するために使用される私のコードです:

var dataArr = [];
$("#sortable li").each(function(idx, elem) {
    dataArr[idx] = $(elem).html();
});

次に dataArr[0] を出力すると、明らかに「John」だけが必要な場合に、「< img src="images/ john.jpg ">John」という文字列が返されます。

Answer 1

これを試してください:dataArr[idx] = $(elem).text();
.text()ノードのテキストの子のみが表示されます

Answer 2

text()の代わりに使用html():

dataArr[idx] = $(elem).text();

または、少し安くして、反復ごとに jQuery オブジェクトにラップするコストを回避するには、次のようにします。

dataArr[idx] = elem.textContent || elem.innerText;

参考文献:

• text().

Answer 3

    var dataArr = [];
  $("#sortable li").each(function(idx, elem) {    
     dataArr[idx]   = $(elem).text();
    });