基於div內容的jQuery克隆

Question

我想克隆一個div的內容，只有當它的內容匹配第三個div內容時，到目前爲止我已經得到了克隆部分的工作，但無法弄清楚如何檢查內容對另一個DIV。

$(function(){ 
var $button = $('.duration').clone(); 
$('#ewp-div').html($button); 
}); 

我想克隆「.duration」到‘＃EWP-DIV’的內容，但前提是「.duration」包含相同的文字作爲h1標籤？

我有什麼我到目前爲止小提琴..

http://jsfiddle.net/bloodygeese/aqp0adnx/

Answer 1

使用:contains選擇，或使用filter。基於所提供的值/規則將減少匹配。

基本:contains選擇看起來是這樣的：

：http://jsfiddle.net/aqp0adnx/1/

$(function(){ 
    var $button = $('.duration:contains("September")').clone(); 
    $('#ewp-div').html($button); 
}); 

您可以從您的H1的內容使用字符串連接來構建選擇明顯帶動contains值（月）像這樣例如基於評論http://jsfiddle.net/aqp0adnx/2/

$(function(){ 
    var $button = $('.duration:contains("' + $('h1').text() + '")').clone(); 
    $('#ewp-div').html($button); 
}); 

更新：

如果你想匹配整個H1（如 「9月14日」），那麼它已經將工作原樣：

http://jsfiddle.net/aqp0adnx/3/

如果您只想匹配第一個單詞，請首先根據空格字符將其分開：

http://jsfiddle.net/aqp0adnx/4/

$(function(){ 
    var $button = $('.duration:contains("' + $('h1').text().split(' ')[0] + '")').clone(); 
    $('#ewp-div').html($button); 
}); 

你想怎麼搭配它是給你的規則/邏輯。例如，完全匹配需要應用filter，但這似乎不適用於您的示例數據。

如果要精確匹配或使用複雜規則，請使用帶函數的filter。該函數依次調用每個元素。如果該函數返回true，則該元素被保留（否則將被丟棄）。

例如這完全相反：http://jsfiddle.net/aqp0adnx/6/

$(function() { 
    var h1 = $('h1').text(); 
    var $button = $('.duration').filter(function() { 
     return $(this).text() == h1; 
    }).clone(); 
    $('#ewp-div').html($button); 
});