Как обернуть 2 элемента с помощью jQuery?

Question

Я хочу сделать следующий код:

<h2>TEXTz</h2>
<p>ARTICLE</p>


<h2>TEXTx</h2>
<p>ARTICLE</p>

Выглядеть так:

<div class="highlight">
<h2>TEXTz</h2>
<p>ARTICLE</p>
</div>

<h2>TEXTx</h2>
<p>ARTICLE</p>

Но я должен использовать: содержит для поиска текст h2 и добавить перенос перед h2 и после p.

Мой код ошибки:

$.extend($.expr[':'],{containsExact: function(a,i,m){return $.trim(a.innerHTML.toLowerCase()) === m[3].toLowerCase();}});

var byItem = "TEXTz"

var ItemTitle = $("h2:containsExact(" + byItem +")").text();
var ItemDes = $("h2:containsExact(" + byItem +")").next("p").text();

$("h2:containsExact(" + byItem +")").html('<section class="highlightitem"><h2>' + ItemTitle + '</h2><p>' + ItemDes + '</p></div>');

http://jsfiddle.net/NDUzW/

Answer 1

Просто используйте функции jQuery:

var byItem = "TEXTz"

    $("h2")
        .filter(
            function() {
                if ($(this).html() == byItem) {
                    return true;
                }
                return false;
           }
       )
       .next("p")
       .andSelf()
       .wrapAll($("<section>")
            .addClass("highlightitem")
       );

Пример

Answer 2

Метод .add () позволяет добавлять элементы в объект jquery.

Затем вы можете использовать .wrapAll () для переноса набора элементов в jQuery.

var $h2 = $("h2:containsExact(" + byItem +")");
if ($h2.length) {
    $h2.add( $h2.next('p') )
       .wrapAll( $('<div>').addClass('highlight') );
}

Рабочий пример для jsfiddle