Блог

Главная - Вопросы по программированию - jQuery — выбор элементов изнутри элемента

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

#jquery #jquery-selectors #parent-child

#jquery #jquery-селекторы #родитель-потомок

Вопрос:

допустим, у меня есть разметка, подобная этой:

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

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

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

Комментарии:

1. Почему бы и нет $('#moo') ? 😉 Кстати. это действительно работает: jsfiddle.net/fkling/k5X2r

2. Я не знаю почему, но функция, которую я подключаю к выбранному диапазону, применяется ко всем диапазонам страницы, а не только к тому, который находится внутри #foo : (

3. Что делать, если у вас уже есть элемент, выбранный в переменной, так что, например, вы начинаете с var ele = $("div #foo") как вы можете перейти к moo отсюда (без использования ссылок на массивы)

Ответ №1:

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

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

Взгляните

Ответ №2:

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

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

или

 $("#foo > #moo")

или

 $("#foo > span")

Комментарии:

1.Это ничего не выберет, потому что элемент имеет идентификатор moo , а не класс.

2. Стоит отметить, что .children() и .find() похожи, за исключением того, что первый перемещается только на один уровень вниз по поддереву DOM.

Ответ №3:

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

 var name = $('#div1').find('#txtName').val();

Ответ №4:

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

 $("#foo span")

или

 $("#foo > span")

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

Комментарии:

1. $($(elementA), 'tr#' key ' span') у меня не работает (jQuery 1.10.2)

Ответ №5:

Взгляните сюда — для запроса подэлемента элемента:

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

Ответ №6:

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

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

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

например.

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

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

ДЕМОНСТРАЦИЯ

Комментарии:

1. Спасибо, что дали название метода, действительно ценится

Ответ №7:

кажется, оба работают.

смотрите скрипку:http://jsfiddle.net/maniator/PSxkS /