Jquery как найти вложенный элемент - Исправление недочетов и поиск решений вместе с Examum.ru

.find( selector )Returns: jQuery

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

version added: 1.0.find( selector )
- selector
  
  A string containing a selector expression to match elements against.
version added: 1.6.find( element )
- element
  
  An element or a jQuery object to match elements against.

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

The first signature for the .find()method accepts a selector expression of the same type that we can pass to the $() function. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like > p which will find all the paragraphs that are children of the elements in the jQuery object.

Consider a page with a basic nested list on it:

  <li class="item-i">I</li>
      <li class="item-a">A</li>
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
      <li class="item-c">C</li>
  <li class="item-iii">III</li>

If we begin at item II, we can find list items within it:

1	`$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );`

The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.

Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). If we need to retrieve all of the descendant elements, we can pass in the universal selector '*' to accomplish this.

Selector context is implemented with the .find() method; therefore, $( "li.item-ii" ).find( "li" ) is equivalent to $( "li", "li.item-ii" ).

As of jQuery 1.6, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:

1	`var allListElements = $( "li" );`

And then pass this jQuery object to find:

1	`$( "li.item-ii" ).find( allListElements );`

This will return a jQuery collection which contains only the list elements that are descendants of item II.

Similarly, an element may also be passed to find:

1 2	`var item1 = $( "li.item-1" )[ 0 ];` `$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );`

The result of this call would be a red background on item 1.

Examples:

Starts with all paragraphs and searches for descendant span elements, same as $( "p span" )

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
$( "p" ).find( "span" ).css( "color", "red" );

Demo:

A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
$( "p" ).find( spans ).css( "color", "red" );

Demo:

Add spans around each word then add a hover and italicize words with the letter t.

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  find that which matters to you
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
      $( this ).addClass( "hilite" );
      $( this ).removeClass( "hilite" );
  .find( ":contains('t')" )

Demo:

Источник

Содержание:

.find( selector )
- .find( selector )
- .find( element )
Обсуждение
Примеры

.find( selector )Возвращает: jQuery

Описание: Поиск потомков внутри каждого элемента в текущем наборе соотвествующих элементов с фильтрацией по селектору, объекту jQuery или элементу.

Добавлен в версии: 1.0.find( selector )
- selector
  
  Строка содержащая выражение селектора для получения соответсвующих элементов.
Добавлен в версии: 1.6.find( element )
- element
  
  Элемент или объект jQuery внутри которого будет производится поиск элементов.

Учитывая что объект jQuery представляет из себя набор DOM элементов, метод .find() разрешает нам находить потомки элементов в DOM дереве и конструировать новый объект jQuery из найденных элементов. Методы .find() и .children() похожи, за исключением того, что последний проходит вниз по DOM дереву только на один уровень.

Первая сигнатура метода .find() принимает выражение селектора того же типа что и функция $(). Элементы будут фильтроваться путем проверки — соответстует ли данный элементы селектору.

Рассмотрим страницу на которой расположены вложенные списки:

  <li class="item-i">I</li>
      <li class="item-a">A</li>
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
      <li class="item-c">C</li>
  <li class="item-iii">III</li>

Если мы начнем с пункта II, мы можем найти элементы списка внутри него:

1	`$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );`

Результатом работы этого кода станет красный фон для элементов A, B, 1, 2, 3 и C. Даже если элемент II соответствует выражению селектора, он не включается в результаты, так как только потомки считаются кандидатами на соответствие.

В отличие от большинства методов обхода, метод .find() требует обязательного выражения селектора. Если нам нужны все потомки, то мы можем указать универсальный селектор '*' для этого.

Контекст селектора реализованн в методе .find(), следовательно, $( "li.item-ii" ).find( "li" ) эквивалентно $( "li", "li.item-ii" ).

Начиная с jQuery 1.6, вы также можете фильтровать выбор при помощи переданного объекта jQuery или элемента. С тем же списком описанным выше, если мы начнем с:

1	`var allListElements = $( "li" );`

И затем передадим этот jQuery объект в find:

1	`$( "li.item-ii" ).find( allListElements );`

То это вернет jQuery коллекцию, которая содержит который содержит только элементы списка, являющиеся потомками элемента II.

Аналогично, фильтровать можно по элементу:

1 2	`var item1 = $( "li.item-1" )[ 0 ];` `$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );`

Результатом этого вызова будет красный фон у элемента 1.

Примеры использования

Источник

В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.

find() – выбор потомков

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find().

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом «carousel-items», расположенные в «.carousel»:

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  <div class="carousel-items">
</div>

<script>
var carousel = $('.carousel');
// выберем потомков с классом carousel-item для элементов набора carousel
var items = carousel.find('.carousel-item');

// пример указания элементов в find посредством ссылки на DOM-элементы
// var elements = document.querySelectorAll('.carousel-item');
// var items = carousel.find(elements);

// с помощью набора jQuery
// var elements = $('.item');
// var items = carousel.find(elements);
</script>

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children().

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>
<div class="message">
  <h3>...</h3>
  <p>...</p>
</div>

<script>
  const elements = $('.message').children();
</script>

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только <h3>:

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest().

Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).

Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.

Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  // текущий набор
  var elements = $('li.active');
  // выберем ближайших предков по селектору ul для элементов, содержащихся в наборе elements
  var ul = elements.closest('ul');
</script>

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next().

При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выберем <li> расположенный после «.active»:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  const element = $('li.active').next('li');
</script>

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

const element = $('li.active').next();

Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll().

Например:

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil(). Он позволяет получить все следующие элементы до указанного.

Например, выберем все <li> кроме последнего, расположенные после «.active»:

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev(), prevAll() и prevUntil().

Например:

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div class="current"></div>
  <div></div>
</div>

<script>
  var prev = $('.current').prev();
</script>

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings().

При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  var elements = $('li.active').siblings();
</script>

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

Например, получим родительский элемент для <li> с классом active:

<ul>
  <li>One</li>
  <li class="active">Two</li>
  <li>Three</li>
</ul>

<script>
  const elements = $('li.active').parent();
</script>

В jQuery кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html>).

Например, получим всех предков для <li> с классом active:

<body>
  <ul>
    <li>One</li>
    <li class="active">Two</li>
    <li>Three</li>
  </ul>
  ...

<script>
  const elements = $('li.active').parents(); // <ul>, <body>, <html>
</script>

При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.

Например, получим предков, соответствующего селектору .one для элемента с классом three:

<div class="one">
  <div class="two">
    <div class="three">...</div>
  </div>
</div>

<script>
  var elements = $('.three').parents('.one');
</script>

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil():

Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:

<div class="container">
  <div class="one">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.three').parentsUntil('div', '.container');
</script>

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent(). Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active:

<div class="container">
  <div class="one" style="position: relative;">
    <div class="two">
      <div class="active">...</div>
    </div>
  </div>
</div>

<script>
  var elements = $('.active').offsetParent();
</script>

contents() — выбрать все дочерние узлы

В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.

Источник

let’s say I have a markup like this:

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

and I want to select #moo.

why $('#foo').find('span') works, but $('span', $('#foo')); doesn’t ?

Pranay Rana

175k35 gold badges237 silver badges263 bronze badges

asked Apr 27, 2011 at 18:13

You can use any one these [starting from the fastest]

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

Take a look

answered Apr 27, 2011 at 18:50

Jishnu A PJishnu A P

14.2k8 gold badges40 silver badges50 bronze badges

Actually, $(‘#id’, this); would select #id at any descendant level, not just the immediate child. Try this instead:

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

$("#foo > #moo")

$("#foo > span")

answered Apr 27, 2011 at 18:15

Pranay RanaPranay Rana

175k35 gold badges237 silver badges263 bronze badges

You can use find option to select an element inside another. For example, to find an element with id txtName in a particular div, you can use like

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

answered Dec 4, 2017 at 13:13

Why not just use:

$("#foo span")

$("#foo > span")

$('span', $('#foo')); works fine on my machine

answered Apr 27, 2011 at 18:19

hunterhunter

62.1k19 gold badges113 silver badges113 bronze badges

Have a look here — to query a sub-element of an element:

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

answered Jul 7, 2014 at 16:46

CodyCody

9,6954 gold badges60 silver badges46 bronze badges

….but $(‘span’, $(‘#foo’)); doesn’t work?

This method is called as providing selector context.

In this you provide a second argument to the jQuery selector. It can be any css object string just like you would pass for direct selecting or a jQuery element.

eg.

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

The above line will select all spans within the container having the class named cont1.

DEMO

answered Aug 24, 2018 at 23:29

Mohd Abdul MujibMohd Abdul Mujib

12.9k8 gold badges62 silver badges88 bronze badges

Источник

В jQuery существуют методы для работы с соседними элементами, потомками а также для поиска элементов внутри родительского. Рассмотрим эти методы.

Обращение к предыдущему и следующему элементу (prev, next)

Для обращения к предыдущему и следующему элементу существуют два метода под названием prev, next. Всё что они делают — указывают на предыдущий или последующий HTML тег. Попробуем применить их на практике. Используем их одновременно так, чтобы поменять HTML содержимое предыдущего и последующего элемента:

<div id="1">Тише, мыши, кот на крыше</div>
<div id="2">а котята ещё выше.</div>
<div id="3">Кот пошёл за молоком,</div>
<div id="4">а котята кувырком.</div>
<script>
   $('#2').prev().html('Мышь'); // меняет содержание элемента с id="1" на "Мышь"
   $('#3').next().html('Кот'); // меняет содержание элемента с id="4" на "Кот"
</script>

Результат выполнения такого кода будет таким:

<div id="1">Мышь</div>
<div id="2">а котята ещё выше.</div>
<div id="3">Кот пошёл за молоком,</div>
<div id="4">Кот</div>

Первый и последний вложенный элемент (first, last)

Методы first и last находят первый и последний элемент внутри родительского. Продемонстрируем их работу, модифицировав предыдущий применр.

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').first().html('Мышь'); // содержание первого элемента меняется на "Мышь"
   $('div').last().html('Кот'); // содержание последнего элемента меняется на "Кот"
</script>

Код $(‘div’) вернёт ссылки на все div элементы. Но first и last отфильтруют первый и последний из них, поэтому метод html будет применён только к первому и последнему div:

<div>Мышь</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>Кот</div>

Обращение к родительскому элементу (parent)

В библиотеке jQuery есть удобный метод для обращения к родительскому элементу. Это метод parent. Благодаря ему не обязательно придумывать селектор, чтобы выбрать родительских элемент относительно текущего. Достаточно использовать этот метод. Попробуем продемонстрировать это на примере:

<div>
   <span id="mouse">Тише, мыши, кот на крыше</span>
</div>
<script>
   $('#mouse').parent().append('<span>а котята ещё выше.</span>');
</script>

В примере сначала выбирается элемент с id=»mouse». Затем с помощью метода «parent» происходит обращение к его родительскому элементу. И только потом происходит вставка HTML кода в конец элемента с помощью метода «append». Результат выполнения кода:

<div>
   <span id="mouse">Тише, мыши, кот на крыше</span>
   <span>а котята ещё выше.</span>
</div>

Поиск элемента внутри родителя (find)

Порой надо найти элементы внутри уже найденных. Для этого можно использовать метод find. Продемонстрируем его работу наглядно:

<div id="mouse">
   <div>Тише, мыши, кот на крыше</div>
   <div>а котята ещё выше.</div>
   <div id="cat">Кот пошёл за молоком</div>
</div>
<script>
   $('#mouse').find('#cat').append('!!!');
</script>

В результате выполнения этого кода элементу с id=»cat», который находится внутри элемента с id=»mouse», будет в конец дописаны «!!!»:

<div id="mouse">
   <div>Тише, мыши, кот на крыше</div>
   <div>а котята ещё выше.</div>
   <div id="cat">Кот пошёл за молоком!!!</div>
</div>

Источник

.find( selector )Returns: jQuery

version added: 1.0.find( selector )

version added: 1.6.find( element )

Demo:

Demo:

Demo:

Содержание:

.find( selector )Возвращает: jQuery

Добавлен в версии: 1.0.find( selector )

Добавлен в версии: 1.6.find( element )

find() – выбор потомков

children() – выбор дочерних элементов

closest() – выбор ближайшего предка

next() – выбор следующего элемента

prev() – выбор предыдущего элемента

siblings() – выбор сиблингов

parent() – получение родителя

offsetParent() – получение ближайшего позиционированного предка

contents() — выбрать все дочерние узлы

Take a look

Обращение к предыдущему и следующему элементу (prev, next)

Первый и последний вложенный элемент (first, last)

Обращение к родительскому элементу (parent)

Поиск элемента внутри родителя (find)