web-dev-qa-db-ja.com

jQuery-要素内から要素を選択する

このようなマークアップがあるとしましょう：

<div id="foo">
  ...
  <span id="moo">
    ...
  </span>
  ...
</div>

#mooを選択します。

なぜ$('#foo').find('span')は機能するが、$('span', $('#foo'));は機能しないのか？

jqueryjquery-selectorsparent-child
81
Alex

これらのいずれかを使用できます[最速から開始]

$("#moo") > $("#foo #moo") > $("div#foo span#moo") > $("#foo span") > $("#foo > #moo")

見てください

119
Jishnu A P

実際、$（ '＃id'、this）;直接の子だけでなく、任意の子孫レベルで#idを選択します。代わりにこれを試してください：

$(this).children('#id');

または

$("#foo > #moo")

または

$("#foo > span")
51
Pranay Rana

なぜ単に使用しないのですか：

$("#foo span")

または

$("#foo > span")

$('span', $('#foo'));は私のマシンで正常に動作します;）

9
hunter

ここをご覧ください-要素のサブ要素を照会するため：

$(document.getElementById('parentid')).find('div#' + divID + ' span.child');

6
Cody

findオプションを使用して、別の要素を選択できます。たとえば、特定のdivでid txtNameの要素を見つけるには、次のように使用できます

var name = $('#div1').find('#txtName').val();
4
Sai Kalyan Kumar Akshinthala

....しかし$（ 'span'、$（ '＃foo'））;動作しませんか？

このメソッドは、 セレクタコンテキスト を提供すると呼ばれます。

これで、jQueryセレクターに2番目の引数を指定します。直接選択またはjQuery要素に渡すのと同じように、任意のcssオブジェクト文字列を指定できます。

例えば。

$("span",".cont1").css("background", '#F00');

上記の行は、cont1という名前のクラスを持つコンテナ内のすべてのスパンを選択します。

DEMO

2
Mohd Abdul Mujib

両方とも機能しているようです。

フィドルを参照してください： http://jsfiddle.net/maniator/PSxkS/

1
Neal