cpp

Привязка поиска к другим элементам

Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов:

  • find(<Параметр>) — находит элементы, которые располагаются внутри контейнера. Возвращает новую коллекцию. В качестве параметра можно указать селектор, DOM-элемент, массив DOM-элементов или объект jQuery. Найдем все теги <div>, затем внутри них все теги <span> и изменим текст внутри этих тегов:
<div>
   <u><span>Текст 1</span></u>
   <span>Текст 2</span>
</div>
$('div').find('span').html('Новый текст');

Результат:

<div>
   <u><span>Новый текст</span></u>
   <span>Новый текст</span>
</div>

Пример указания массива DOM-элементов:

$('div').find( $('span').get() ).html('Новый текст');

Пример указания объекта jQuery:

$('div').find( $('span') ).html('Новый текст');
  • children([<Селектор>]) — возвращает все дочерние узлы. Выделим все элементы внутри тегов <div>:
<div>
   <u><b>Выделенный</b> текст 1</u>
   <b>Текст 2</b>
</div>
$('div').children().css('color', 'red');

Результат:

<div>
   <u style="color: red;"><b>Выделенный</b> текст 1</u>
   <b style="color: red;">Текст 2</b>
</div>

Если в качестве необязательного параметра указать селектор, то будут возвращены дочерние узлы, которые соответствуют селектору:

<div>
   <u><b>Выделенный</b> текст 1</u>
   <b>Текст 2</b>
</div>
$('div').children('b').css('color', 'red');

В этом примере будет выделен только фрагмент «Текст 2», так как второй тег <b> расположен внутри тега <u>:

<div>
   <u><b>Выделенный</b> текст 1</u>
   <b style="color: red;">Текст 2</b>
</div>
  • has(<Параметр>) — возвращает все элементы, содержащие хотя бы один элемент, соответствующий параметру. В качестве параметра можно указать селектор или DOM-элемент. Выделим все элементы DIV, внутри которых содержится хотя бы одна ссылка:
$('div').has('a').css('background-color', 'red');
  • parent([<Селектор>]) — находит контейнер, в который вложен элемент. Получим любые теги, в которые вложены теги <span>, и выведем новый текст вместо их содержимого:
<div><span>Текст</span></div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>
$('span').parent().html('Это элемент-родитель');

Результат:

<div>Это элемент-родитель</div>
<b>Это элемент-родитель</b>
<b><u>Текст</u></b>

Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Найдем все теги <div>, в которые вложены теги <span> и выведем новый текст вместо их содержимого:

<div><span>Текст</span></div>
<div><b><span>Текст</span></b></div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>
$('span').parent('div').html('Это элемент-родитель');

Результат будет выглядеть следующим образом:

<div>Это элемент-родитель</div>
<div><b><span>Текст</span></b></div>
<b><span>Текст</span></b>
<b><u>Текст</u></b>

При щелчке на кнопке отобразим скрытый абзац, который находится в одном контейнере с ней, а затем удалим эту кнопку:

<div>
   Термин 1 <input type="button" value="Показать описание">
   <p style="display: none">Описание термина 1</p>
</div>
<div>
   Термин 2 <input type="button" value="Показать описание">
   <p style="display: none">Описание термина 2</p>
</div>
$('input:button').click( function() {
   $(this)                // Находим кнопку
   .parent()              // Получаем элемент-родитель
   .find('p:hidden')      // Находим скрытый тег <p>
   .show()                // Отображаем его
   .end()                 // Возвращаемся к элементу-родителю
   .find(this)            // Находим внутри него кнопку
   .remove();             // Удаляем кнопку
});
  • closest(<Параметр>[, <Контекст>]) — возвращает ближайший родительский элемент, который соответствует параметру. В качестве параметра можно указать селектор (во втором параметре можно задать контекст), DOM-элемент или объект jQuery. Пример указания селектора:
<div><div><p>
   <span id="span1">Текст</span>
</p></div></div>
$('#span1').closest('div').html('Это элемент-родитель');

Результат:

<div><div>Это элемент-родитель</div></div>
  • offsetParent() — возвращает ближайший родительский элемент, который имеет позиционирование relative, absolute или fixed:
<div style="position: relative">
   <div>
      <p><span id="span1">Текст</span></p>
   </div>
</div>
$('#span1').offsetParent().html('Это элемент-родитель');

Результат:

<div style="position: relative">Это элемент-родитель</div>
  • parents([<Селектор>]) — возвращает все контейнеры, в которые вложен элемент. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Получим все теги, в которые вложен элемент с идентификатором span1, и выведем их названия:
<div><u><b>
   <span id="span1">Текст</span>
</b></u></div>
<div id="log"></div>
var log = $('#log');
$('#span1').parents().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U DIV BODY HTML
  • parentsUntil([<Параметр>[, <Фильтр>]]) — возвращает все контейнеры, в которые вложен элемент, до элемента, соответствующего первому параметру (не включая этот элемент). Если параметры не указаны, то результат будет таким же, как и при использовании метода parents():
<div id="div1"><div><u><b>
   <span id="span1">Текст</span>
</b></u></div></div>
<div id="log"></div>
var log = $('#log');
$('#span1').parentsUntil().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U DIV DIV BODY HTML

В первом параметре можно указать селектор, DOM-элемент или объект jQuery:

var log = $('#log');
$('#span1').parentsUntil('#div1').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U DIV

Во втором параметре указывается селектор, которому должны соответствовать возвращаемые элементы:

var log = $('#log');
$('#span1').parentsUntil('#div1', 'b, u').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U
  • siblings([<Селектор>]) — находит все элементы, которые расположены до или после указанного элемента на одном уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Цвет текста ссылки станет красным, если тег <a> следует до или после элемента с идентификатором div1:
<a href="link1.html">Ссылка 1</a><br>
<span>Текст</span>
<div id="div1">Текст</div>
<span>Текст</span><br>
<a href="link2.html">Ссылка 2</a><br>
<span><a href="link3.html">Ссылка 3</a></span><br>
<a href="link4.html">Ссылка 4</a>
$('#div1').siblings('a').css('color', 'red');

В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3 не станет красного цвета, т. к. расположена внутри тега <span>.

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

<a href="link1.html">Ссылка 1</a><br>
<span>Текст</span>
<div id="div1">Текст</div>
<div id="div2">Текст</div>
<a href="link2.html">Ссылка 2</a><br>
<span><a href="link3.html">Ссылка 3</a></span><br>
<a href="link4.html">Ссылка 4</a>
var elems = $('#div1, #div2');
elems.siblings().not(elems).css('color', 'red');
  • next([<Селектор>]) — находит элемент, который является соседним для указанного элемента и следует сразу после него. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Выделим содержимое тега, который следует сразу за элементом с идентификатором span1:
<div>
   <p>Текст абзаца</p>
   <span id="span1">Текст</span>
   <b>Текст1</b>
   <u><b>Текст2</b></u>
</div>
$('#span1').next().css('color', 'red');

В результате будет выделен фрагмент "Текст1";

  • nextAll([<Селектор>]) — возвращает все элементы, которые следуют после указанного элемента на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Получим все названия тегов, которые следуют после элемента с идентификатором span1:
<div>
   <p>Текст абзаца</p>
   <span id="span1">Текст</span>
   <b>Текст</b>
   <u><b>Текст</b></u>
</div>
<div id="log"></div>
var log = $('#log');
$('#span1').nextAll().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U

Обратите внимание: мы не получили второй тег <b>, так как он расположен внутри тега <u>;

  • nextUntil([<Параметр>[, <Фильтр>]]) — возвращает все элементы, которые следуют после указанного элемента на том же уровне вложенности. Поиск выполняется до элемента, соответствующего первому параметру (этот элемент не попадет в результат). Если параметры не указаны, то результат будет таким же, как и при использовании метода nextAll():
<div>
   <p>Текст абзаца</p>
   <span id="span1">Текст</span>
   <b>Текст</b>
   <u><b>Текст</b></u>
   <span id="span2">Текст</span>
</div>
<div id="log"></div>
var log = $('#log');
$('#span1').nextUntil().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U SPAN

В первом параметре можно указать селектор, DOM-элемент или объект jQuery:

var log = $('#log');
$('#span1').nextUntil('#span2').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U

Во втором параметре указывается селектор, которому должны соответствовать возвращаемые элементы:

var log = $('#log');
$('#span1').nextUntil('#span2', 'b').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B
  • prev([<Селектор>]) — находит элемент, который является соседним для указанного элемента и находится сразу перед ним. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Выделим содержимое тега, который находится перед элементом с идентификатором span1:
<div>
   <u><b>Текст2</b></u>
   <b>Текст1</b>
   <span id="span1">Текст</span>
   <p>Текст абзаца</p>
</div>
$('#span1').prev().css('color', 'red');

В результате будет выделен фрагмент "Текст1";

  • prevAll([<Селектор>]) — возвращает все элементы, которые находится перед указанным элементом на том же уровне вложенности. Если в качестве необязательного параметра указать селектор, то будут возвращены элементы, которые ему соответствуют. Получим все названия тегов, которые находится перед элементом с идентификатором span1:
<div>
   <u><b>Текст2</b></u>
   <b>Текст1</b>
   <span id="span1">Текст</span>
   <p>Текст абзаца</p>
</div>
<div id="log"></div>
var log = $('#log');
$('#span1').prevAll().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U

Обратите внимание: мы не получили первый тег <b>, так как он расположен внутри тега <u>;

  • prevUntil([<Параметр>[, <Фильтр>]]) — возвращает все элементы, которые находится перед указанным элементом на том же уровне вложенности. Поиск выполняется до элемента, соответствующего первому параметру (этот элемент не попадет в результат). Если параметры не указаны, то результат будет таким же, как и при использовании метода prevAll():
<div>
   <span id="span2">Текст</span>
   <u><b>Текст2</b></u>
   <b>Текст1</b>
   <span id="span1">Текст</span>
   <p>Текст абзаца</p>
</div>
<div id="log"></div>
var log = $('#log');
$('#span1').prevUntil().each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U SPAN

В первом параметре можно указать селектор, DOM-элемент или объект jQuery:

var log = $('#log');
$('#span1').prevUntil('#span2').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B U

Во втором параметре указывается селектор, которому должны соответствовать возвращаемые элементы:

var log = $('#log');
$('#span1').prevUntil('#span2', 'b').each( function() {
   log.append(this.tagName + ' ');
});

Результат:

B
  • contents() — находит дочерние узлы (включая текстовые) в коллекции элементов или в содержимом документа, если он представляет собой фрейм. Переместим все текстовые узлы, расположенные внутри элемента с идентификатором div1, в конец элемента с идентификатором div2:
<div id="div1">Текстовый узел1 <b>узел элемента</b>
 Текстовый узел2</div>
<div id="div2"></div>
$('#div1').contents().filter( function() {
   return this.nodeType === 3;
}).appendTo('#div2');

Результат:

<div id="div1"><b>узел элемента</b></div>
<div id="div2">Текстовый узел1 
 Текстовый узел2</div>

Свойство nodeType содержит тип узла. Может принимать следующие значения:

  • 1 — ELEMENT_NODE — тег;
  • 3 — TEXT_NODE — простой текст;
  • 8 — COMMENT_NODE — комментарий;
  • 9 — DOCUMENT_NODE — HTML-документ;
  • addBack([<Селектор>]) — добавляет предыдущую коллекцию к новой. Если в качестве необязательного параметра указать селектор, то будут добавлены элементы из предыдущей коллекции, которые ему соответствуют. В этом примере содержимое тега <div>, а также ссылки 1, 2 и 4 будут обведены пунктирной рамкой. Ссылка 3 не будет обведена, так как расположена внутри тега <span>:
<div><br>
   <a href="link1.html">Ссылка 1</a><br><br>
   <a href="link2.html">Ссылка 2</a><br><br>
   <span><a href="link3.html">Ссылка 3</a></span><br><br>
   <a href="link4.html">Ссылка 4</a><br><br>
</div>
$('div').children('a')
   // Добавляем коллекцию тегов <div>
   // к коллекции тегов <a>, являющихся 
   // дочерними элементами тегов <div>
   .addBack()
   .css({'border-style': 'dotted', margin: '20px'});
  • end() — позволяет вернуться к предыдущей коллекции. В качестве примера получим коллекцию всех тегов <div>, внутри которой найдем элемент с идентификатором span1 и выведем в нем соответствующий текст. Затем вернемся к предыдущей коллекции всех тегов <div>, в которой найдем элемент с идентификатором span2 и также выведем в нем соответствующий текст:
<div>
   <span id="span1"></span>
   <span id="span2"></span>
</div>
$('div')
   // Находим элемент с id="span1"
   .find('#span1').html('Это span1')
   // Возвращаемся к предыдущей коллекции
   .end()
   // Находим элемент с id="span2"
   .find('#span2').html('Это span2');

Результат:

<div>
   <span id="span1">Это span1</span>
   <span id="span2">Это span2</span>
</div>
  • is(<Параметр>) — проверяет коллекцию или элемент на соответствие параметру. В качестве параметра можно указать селектор, DOM-элемент, массив DOM-элементов, объект jQuery или функцию обратного вызова. Возвращает true, если коллекция соответствует параметру, и false — в противном случае. Выведем подтверждающее сообщение, если ссылка с идентификатором link1 расположена внутри тега <div>, а в противном случае — название тега, в который вложен элемент:
<div>
   <a href="#" id="link1">Текст ссылки</a>
</div>
var elem = $('#link1').parent();
if ( elem.is('div') ) {
   console.log('Элемент вложен в тег <div>');
}
else {
   console.log('Элемент вложен в тег ' + elem[0].tagName);
}

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Элемент DOM>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this или через параметр <Элемент DOM>. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Индекс элемента в коллекции доступен через параметр <Индекс>. Метод is() вернет значение true, если внутри функции обратного вызова вернуть значение true. Пример:

var elem = $('#link1').parent();
if (elem.is( function() { return this.tagName === 'DIV'; })) {
   console.log('Элемент вложен в тег <div>');
}

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp