contents()

.contents( )

Возвращает: jQuery

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

.contents( )

Добавлена в версию: 1.2

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

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

Рассмотрим простой <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 />, и эти элементы удаляются.

Примеры

Пример 1

Поиск всех текстовых блоков в параграфе и применение к ним тэга b.

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

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

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
  });
  </script>
 
</head>
<body>

  <p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
</body>

</html>

Попробуйте сами

Пример 2

Добавление нового содержимого в пустой фрейм.

$("iframe").contents().find("body").append("I'm in an iframe!");

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

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("iframe").contents().find("body").append("I'm in an iframe!");
  });
  </script>
  
</head>
<body>
  <iframe src="/index-blank.html" width="300" height="100"></iframe>
</body>
</html>

Попробуйте сами

Пример 3

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

$("#frameDemo").contents().find("a").css("background-color","#BADA55");

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

Попробуйте сами

Пример 3 - Полный код:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
       $("#frameDemo").contents().find("a").css("background-color","#BADA55");
     });
  </script>
</head>
<body>
	<iframe src="http://xhtml.co.il/ru/" width="100%" height="600" id='frameDemo'></iframe> 
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

contents()

.contents( )

.contents( )

Примеры

Пример 1

Пример 1 - Полный код:

Пример 2

Пример 2 - Полный код:

Пример 3

Пример 3 - Полный код:

Комментарии