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

Posted 2023-05-08

【中文标题】如何单击以克隆与这些类匹配的所有 id

【英文标题】：How to click to clone all id's that match these classes

【发布时间】：2017-10-03 02:09:20

【问题描述】：

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

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

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

我有fiddle 这里显示这个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();
      

  );
);

【问题讨论】：

答案没有提到的一件事是，当您克隆一个元素时，它具有与其克隆相同的 ID。 ID 在文档中必须是唯一的，所以div#a1:last 与div#a1 相同，因为只有一个div 的ID 为a1。请注意，div#a1 也是多余的，因为#a1 将唯一标识 ID 为 a1 的一个元素，无论该元素是否为 div。

使用时会不会出现问题？如果我要删除 div#a1，它会删除所有当前在页面上的内容，但如果我以 div#return 为目标并删除它们，它应该只在 div#a1 已经被克隆并 appendTo #return 时删除它。跨度>

ID 在文档中必须是唯一的。换句话说，如果您的文档中有多个div#a1，那么它就是一个无效文档，并且您将来还会遇到许多其他问题。

那么我应该在克隆之前更改 id。也许将其更改为#clone + myclass。这是基于@Gaby aka G. Petrioli 答案的新答案。 jsfiddle.net/zyech6L3/3

好吧，在那个小提琴中，您实际上是在克隆后更改了 id，但这就是您想要的:)。

【参考方案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/

【讨论】：

啊，这很有道理！是的，这完全符合我的需要。并且 if 语句工作得很好，不允许它再次重复。非常感谢！

我收到了来自@MikeMcCaughan 的关于克隆 div 而不更改 ID 的建议。使用您的答案，我添加了一些内容来克隆 div 并将 id 更改为 #klone + myclass。 jsfiddle.net/zyech6L3/3

@cgrouge 确实需要拥有有效的 html 并避免将来出现一些陷阱。很好的修复。

【参考方案2】：

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

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

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

【讨论】：

这几乎正是我所需要的。我没有意识到我没有遍历按钮的每个类。现在这是有道理的！此解决方案在已克隆后并未停止克隆