Специальный поиск содержащихся элементов

.contents()

Возвращает все дочерние элементы выбранных элементов, а так же текстовое содержимое. Метод имеет один вариант использования:

.contents():jQuery1.2

Метод не имеет параметров.

В отличие от схожего метода .children(), в этом методе, в результат будут включены блоки текста, лежащие непосредственно внутри выбранных элементов. Например, для страницы, содержащей следующий html-текст

<div class="text">
  Текст в начале
  <p>
    Текст в параграфе
  </p>
  Текст в конце
</div>

эти два метода вернут различный результат:

$(".text").children().each(function(){
  alert($(this).text());
});
// в результате, на экране появится одно сообщение: "Текст в параграфе"
 
$(".text").contents().each(function(){
  alert($(this).text());
});
// в результате, на экране появится три сообщения: "Текст в начале", "Текст в параграфе", "Текст в конце"


В действии

Метод contents хорошо подходит для обработки текста на странице. Например, вот так можно избавиться от тегов принудительного переноса на новую строку <br>, поместив, вместо этого, отдельные части текста в параграфы:

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

этот код хорошо обработает, например, такой текст:

<div class="textContainer">
  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>

в результате, мы получим следующий html:

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

Ссылки

Поисковые ключи:
  • дочерние элементы
  • потомки
  • contents()
  • .contents