在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

方法.add()允许将元素添加到一个jquery对象。

然后，您可以使用.wrapAll()在jQuery中包含一组元素。

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

工作例如在jsfiddle

Answer 2

只需使用jQuery函数：

var byItem = "TEXTz" 

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

Example