Question

我正在创建一个页面，单击按钮并将内容添加到div。现在我有三个按钮，至少有一个类。每个类对应一个具有自己内容的div id。我想要做的是抓住按钮上的每个类，找到具有相同名称的div id，克隆它，并将其附加到#return div。

我有一个工作示例，它只会克隆它在按钮上看到的第一个类名。如何让我的jquery找到与按钮上的类匹配的所有div id，克隆它们并将它们附加到#return？

这些按钮可以具有相同的类，但是当它被克隆到#return时，我不希望它再次被克隆。我有一个if语句试图阻止它，但它最终删除它们。我怎么能阻止这个？

我在这里https://github.com/Microsoft/Reporting-Services/issues/21显示了这个jquery正在运行：

$(document).ready(function() {
  $("[id^=button]").click(function() {
    var myclass = $(this).attr("class").split(" ");

    if ($(this).is(".a1,.a2,.a3")) {
      $("div#" + myclass).first().clone().appendTo("#return");
    }

    if ($("#return div#" + myclass).length > 1) {
      $("#return div#" + myclass + ":last").remove();
      }

  });
});

Answer 1

问题是myclass是一个数组，所以当你把它作为一个字符串添加来创建像"div#" + myclass这样的选择器时，它最终会创建一个选择器"div#a1,a2"，这不是你的意思想。

您应该遍历myclass数组并为每个类执行逻辑。

像这样的东西

$(document).ready(function() {
    $("[id^=button]").click(function() {
        var myclass = $(this).attr("class").split(" ");

        if ($(this).is(".a1,.a2,.a3")) {
            myclass.forEach(function(currentClass) {
                if ($("#return div#" + currentClass).length == 0)
                    $("div#" + currentClass).first().clone().appendTo("#return");
            });
        }
    });
});

更新了演示：https://jsfiddle.net/zyech6L3/2/

Answer 2

您需要遍历以检查可用的类。喜欢：

for(var j=0; j<myclass.length; j++){
  $("div#" + myclass[j]).first().clone().appendTo("#return");
}

看到这个小提琴： https://jsfiddle.net/c4soamkr/

如何单击以克隆与这些类匹配的所有ID

2 个答案: