基于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); 
});