Question

我试图克隆div的内容，只有当它的内容与第三个div内容匹配时，到目前为止，我已经让克隆部分工作，但无法弄清楚如何检查内容与另一个DIV。

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

我想克隆＆＃34; .duration＆＃34;的内容到＆＃34;＃ewp-div＆＃34; ，但只有＆＃34; .duration＆＃34;包含与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值（九月）：

e.g。 http://jsfiddle.net/aqp0adnx/2/

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

根据评论进行更新：

如果你想匹配整个H1（比如“9月14日”）那么它已经可以 as-is 了：

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，则保留元素（否则将被丢弃）。

e.g。这确实匹配：http://jsfiddle.net/aqp0adnx/6/

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

基于div内容的jQuery克隆

1 个答案: