www.jQueryBook.ru - jQuery документация

 

Сегодня: 06 декабря 2016 года, Вторник
Раздел API на стадии наполнения...

 

 

 

  • Категории: Manipulation › DOM Insertion, Outside

    .after()

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

Синтаксис и описание:

  • Добавлено в jQuery 1.0.after( source [, source ])

  • Добавлено в jQuery 1.4.after( function(index) )

  • Метод .after() добавляет фрагмент HTML разметки или созданные на лету DOM-элементы, либо перемещает все существующие элементы, определяемые входным параметром, вставляя их последовательно после каждого элемента в наборе jQuery.

Возвращаемое значение: (объект) Набор jQuery.

Параметры:

  • source – (строка | элемент | объект jQuery ) Строка с кодом разметки HTML, либо ссылка на существующий или созданный на лету DOM-элемент, массив элементов, либо набор jQuery.

  • function( index ) – (функция) Возвращает HTML-строку для вставки после соответствующих элементов. В качестве аргумента получает index - индекс текущего элемента в наборе jQuery.

  1. Примечание:

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

  2. Примечание:

    Начиная с версии jQuery 1.4 метод .after() может работать с только что созданными на лету элементами, которые еще не являются DOM узлами. Например, создать блок <div>, следующий за ним абзац <p>, потом добавить им атрибуты, текстовое содержимое, и только после этого вставить все вместе в дерево DOM:

      $('<div/>').after('<p></p>').addClass('foo')
      .filter('p').attr('id','bar').html('hello')
      .end().appendTo('body');


    Результатом выполнения данной цепочки команд jQuery будет вставка в конец содержимого тела документа (перед закрывающим тегом </body>) готовых DOM-элементов:

      <div class="foo"></div>
      <p class="foo" id="bar">hello</p>


    Следует обратить внимание на то, что в результате вставки абзаца <p> после созданного на лету блока <div>, метод .after() возвращает объединенный набор jQuery (абзац также становится элементом набора), чего не происходило бы при обычной вставке после существующего элемента <div> (возвращаемый набор jQuery остался бы без изменений).

Примеры:

  1.  

    // Переместить заголовок <h1>, вставив его после 
    // элемента с id='general'.
    
    $('#general').after($('h1'));
  2.  

    // Вставить после каждого абзаца <p> созданный на лету 
    // с помощью функции блок <div>, содержимое которого 
    // является именем класса, имеющегося у текущего абзаца.
    
    $('p').after(function() {
      return '<div>' + this.className + '</div>';
     });

[ наверх ]










 




Справочник по jQuery JavaScript API на русском языке