.contents()

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

Описание: Получить дочерние элементы каждого элемента в наборе сопоставленных элементов, включая текстовые и комментарийные узлы.

версия добавлена: 1.2.contents()
- Этот метод не принимает никаких аргументов.

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

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

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

Рассмотрим простой <div> с несколькими текстовыми узлами, каждый из которых разделен двумя элементами разрыва строки (<br>):

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>

Можно использовать метод .contents() для преобразования этого блока текста в три правильно сформированных абзаца:

$( ".container" )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    })
      .wrap( "<p></p>" )
      .end()
    .filter( "br" )
    .remove();

Этот код сначала извлекает содержимое <div class="container"> и затем фильтрует его для текстовых узлов, которые заключены в теги абзаца. Это делается путем проверки свойства .nodeType элемента. Это свойство DOM хранит числовой код, указывающий тип узла; текстовые узлы используют код 3. Содержимое снова фильтруется, на этот раз для элементов <br /> , и эти элементы удаляются.

Примеры:

Найти все текстовые узлы внутри абзаца и обернуть их тегом bold.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello <a href="https://johnresig.com/">John</a>, how are you doing?</p>
 
<script>
$( "p" )
  .contents()
  .filter(function(){
    return this.nodeType !== 1;
  })
  .wrap( "<b></b>" );
</script>
 
</body>
</html>

Демо:

Изменить цвет фона ссылок внутри iframe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<iframe src="https://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
 
<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
 
</body>
</html>

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

версия добавлена: 1.2.contents()

Примеры:

Демо:

Демо: