jQuery метод .contents()

Определение и применение

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

jQuery синтаксис:

$( selector ).contents()

Добавлен в версии jQuery

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

Метод .contents() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<!-- First comment -->
<p>Comment list:</p>
<div></div>
<!-- Second comment -->

main.js

JavaScript

$(document).ready(function () {
    var contents = $('body').contents() // получаем дочерние элементы каждого соответствующего элемента в наборе совпавших элементов, включая текстовые узлы и комментарии
    console.log(contents) // выводим в консоль содержимое

    contents.filter(function () {
        // уменьшаем набор сопоставленных элементов до тех, которые удовлетворяют условию, переданному в функцию
        this.nodeType === 8 ? $('div').append(this.nodeValue + '<br>') : null // если тип узла соответствует значению 8 (комментарий), то вставляем в конец элемента <div> значение свойства nodeValue
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .contents() мы получили все дочерние элементы, текстовые узлы и комментарии элемента <body> и поместили в переменную. Чтобы вывести все комментарии, которые содержатся внутри переменной мы воспользовались методом .filter(), который позволяет уменьшить набор сопоставленных элементов до тех, которые удовлетворяют условию, переданному в функцию.

Внутри функции с помощью тернарного оператора мы проверяем тип узла (свойство nodeType) и если он соответствует значению 8 (комментарий), то с помощью метода .append() вставляем в конец элемента <div> значение свойства nodeValue, в нашем случае оно соответствует тексту комментария.