jQuery - выбор элементов внутри элемента

95

скажем, у меня есть такая разметка:

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

и я хочу выбрать #moo.

почему $('#foo').find('span')работает, а $('span', $('#foo'));нет?

jquery jquery-selectors parent-child Alex
источник
10
А почему бы и нет $('#moo')? ;) Кстати. это действительно работает: jsfiddle.net/fkling/k5X2r
Феликс Клинг,
Я не знаю почему, но функция, которую я подключаю к выбранному диапазону, применяется ко всем диапазонам на странице, а не только к тому, что находится внутри #foo :(
Alex
2
А как насчет того, когда у вас уже есть элемент, выбранный в var, поэтому, например, вы начинаете с var ele = $("div #foo")того, как вы можете получить отсюда
мычание

Ответы:

130

Вы можете использовать любой из этих [начиная с самого быстрого]

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

Взглянем

Джишну А.П.
источник
1
Я думаю, что третий должен быть span # moo, а не span # foo?
xr280xr
60

Фактически, $ ('# id', this); выбрал бы #id на любом уровне потомка, а не только на непосредственном потомке. Попробуйте вместо этого:

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

или

$("#foo > #moo")

или

$("#foo > span")
Праная Рана
источник
Это ничего не выберет, потому что у элемента есть идентификатор moo , а не класс.
Феликс Клинг,
4
Стоит отметить, что .children()и .find()они похожи, за исключением того, что первые перемещаются только на один уровень вниз по поддереву DOM.
Кевин
10

Почему бы просто не использовать:

$("#foo span")

или

$("#foo > span")

$('span', $('#foo')); отлично работает на моей машине;)

охотник
источник
$($(elementA), 'tr#' + key + ' span')у меня не работает (jQuery 1.10.2)
Коди
9

Вы можете использовать findопцию, чтобы выбрать элемент внутри другого. Например, чтобы найти элемент с идентификатором txtName в конкретном div, вы можете использовать как

var name = $('#div1').find('#txtName').val();
Сай Калян Кумар Акшинтала
источник
6

Посмотрите здесь - чтобы запросить подэлемент элемента :

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

Коди
источник
3

.... но $ ('span', $ ('# foo')); не работает?

Этот метод вызывается как обеспечивающий контекст селектора .

Здесь вы предоставляете второй аргумент селектору jQuery . Это может быть любая строка объекта css, как при прямом выборе, или элемент jQuery.

например.

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

Вышеупомянутая строка выберет все промежутки в контейнере с именем класса cont1.

ДЕМО

Мохд Абдул Муджиб
источник