jQueryを使用して2番目の子を取得する

$(t).html()

戻り値

<td>test1</td><td>test2</td>

オブジェクトtdから2番目を取得したい$(t)。解決策を探しましたが、うまくいきませんでした。2番目の要素を取得する方法はありますか？

2番目の子を取得します。

$(t).children().eq(1);

または、2番目の子を取得し<td>ます。

$(t).children('td').eq(1);

コードで読む方がわかりやすい解決策は次のとおりです。

順序付けられていないリストの2番目の子を取得するには：

   $('ul:first-child').next()

さらに複雑な例：このコードは、「my_list」として識別されるULの2番目の子要素の「title」属性のテキストを取得します。

   $('ul#my_list:first-child').next().attr("title")

この2番目の例では、「ul」を取り除くことができます、IDは単一のページに対して一意である必要があるため、セレクターの先頭は冗長であるため、ます。例を明確にするためだけにあります。

パフォーマンスとメモリに関する注意：これらの2つの例は、jqueryに後でフィルタリングする必要があるul要素のリストを保存させないため、優れたパフォーマンスを発揮します。

これはどうですか：

$(t).first().next()

主要な更新：

答えがどのように美しく見えるかは別にして、コードのパフォーマンスについても考慮する必要があります。したがって、$(t)変数の内容を正確に把握することも重要です。それが配列である<TD>か、それは<TR>、いくつかのノード<TD>s内のそれ？ポイントをさらに説明するために<ul>、50の<li>子を持つリストのjsPerfスコアを参照してください。

http://jsperf.com/second-child-selector

この$(t).first().next()方法は、ここで断然最速です。

しかし、一方で、<tr>ノードを取得して<td>、同じテストを実行すると、結果は同じにはなりません。

それが役に立てば幸い。:)

ここでは言及していませんが、CSS仕様セレクターを使用することもできます。ドキュメントを見る

$('#parentContainer td:nth-child(2)')

これを試して：

$("td:eq(1)", $(t))

または

$("td", $(t)).eq(1)

jQueryメソッドの使用に加えcellsて、<tr>が提供するネイティブコレクションを使用できます。

$(t)[0].cells[1].innerHTML

tDOM要素であると想定すると、jQueryオブジェクトの作成をバイパスできます。

t.cells[1].innerHTML

_{ネイティブJSがこれを行う方法について誰も言及しなかったのは驚くべきことです。}

jQueryなし：

親要素のchildrenプロパティにアクセスするだけです。インデックスでアクセスできる子要素のライブHTMLCollectionを返します。2番目の子を取得する場合：

parentElement.children[1];

あなたの場合、次のようなものが機能する可能性があります：（例）

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

また、CSS3セレクタの組み合わせを使用する/できるquerySelector()と活用します:nth-of-type()。この方法（例）では要素タイプも指定できるため、この方法は場合によってはうまく機能することがあります。td:nth-of-type(2)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

使用.find()方法

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

以下に示すように、jQueryで2つのメソッドを使用できます。

jQuery：nth-​​childセレクターの使用 2番目のli要素を選択するために、要素の位置を引数として2に設定しました。

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

jQuery：eq（）セレクターの使用

正確な要素を取得する場合は、アイテムのインデックス値を指定する必要があります。リスト要素はインデックス0で始まります。liの2番目の要素を選択するには、引数として2を使用する必要があります。

$( "ul li:eq(1)" ).click(function(){
  //do something
});

例：jQueryでリストの2番目の子要素を取得するを参照してください