使用 jQuery .each() 复制容器

Question

我有三个 div 具有相同的 class，每个 div 都有自己的 ID。我想根据它们的匹配属性将其他三个 div 复制到其中。

$(document).ready(function() {
  $(".prod-cat-addt-details-thumbs-div").each(function(index, obj) {
    var matchingId = $(this).attr("id").replace(/[^0-9]/g, '');
    var matchingContainer = ("prod-cat-thumb-item-") + matchingId;

    if (matchingId == $(".prod-cat-item").attr("data-itemid")) {
      $(this).clone().prop("id", $(this).attr("id") + '-' + matchingId).prop("class", "thumb-gallery").appendTo($('.prod-cat-item[id="' + matchingContainer + '"]'));
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod-cat-thumb-item-5" class="prod-cat-item" data-itemid="5">
  <p>Div Content</p>
</div>

<div id="prod-cat-thumb-item-6" class="prod-cat-item" data-itemid="6">
  <p>Div Content</p>
</div>
<div id="prod-cat-thumb-item-4" class="prod-cat-item" data-itemid="4">
  <p>Div Content</p>
</div>



<div id="prod-cat-addt-details-thumbs-div-4" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

<div id="prod-cat-addt-details-thumbs-div-5" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

<div id="prod-cat-addt-details-thumbs-div-6" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

我被卡住了，非常感谢您的帮助，谢谢！

Answer 1

您可以迭代 prod-cat-item 并将目标元素附加到它。

$(".prod-cat-item").each(function(index, obj) {
    //Get item Id
    var matchingId = $(this).data("itemid");    

    //Create selector to target element
    var matchingContainer = "#prod-cat-addt-details-thumbs-div-" + matchingId;
    $(matchingContainer).addClass("thumb-gallery").appendTo($(this));
});

$(document).ready(function() {
  $(".prod-cat-item").each(function(index, obj) {
    var matchingId = $(this).data("itemid");    
    var matchingContainer = "#prod-cat-addt-details-thumbs-div-" + matchingId;
    $(matchingContainer).addClass("thumb-gallery").appendTo($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod-cat-thumb-item-5" class="prod-cat-item" data-itemid="5">
  <p>Div Content</p>
</div>
<div id="prod-cat-thumb-item-6" class="prod-cat-item" data-itemid="6">
  <p>Div Content</p>
</div>
<div id="prod-cat-thumb-item-4" class="prod-cat-item" data-itemid="4">
  <p>Div Content</p>
</div>


<div id="prod-cat-addt-details-thumbs-div-4" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

<div id="prod-cat-addt-details-thumbs-div-5" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

<div id="prod-cat-addt-details-thumbs-div-6" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

Answer 2

这一行 if(matchingId == $(".prod-cat-item").attr("data-itemid")) 是问题所在，因为 $(".prod-cat-item").attr("data-itemid") 总是返回第一个元素的 data-itemid。您可以使用 $(".prod-cat-item[data-itemid="+matchingId+"]") select 具有相同 data-itemid 的元素，因此解决方案是这样的，请查看：

  $(".prod-cat-addt-details-thumbs-div").each(function(index, obj){
    var matchingId = $(this).attr("id").replace(/[^0-9]/g,'');
    var target =  $(".prod-cat-item[data-itemid="+matchingId+"]");
    $(this).clone().prop("id", $(this).attr("id") + '-' + matchingId).prop("class", "thumb-gallery").appendTo(target);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod-cat-thumb-item-5" class="prod-cat-item" data-itemid="5">
    <p>Div Content</p>
</div>
<div id="prod-cat-thumb-item-6" class="prod-cat-item" data-itemid="6">
    <p>Div Content</p>
</div>
<div id="prod-cat-thumb-item-4" class="prod-cat-item" data-itemid="4">
    <p>Div Content</p>
</div>

<div id="prod-cat-addt-details-thumbs-div-4" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>
<div id="prod-cat-addt-details-thumbs-div-5" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>
<div id="prod-cat-addt-details-thumbs-div-6" class="prod-cat-addt-details-thumbs-div">
  <div class="content">Other Content</div>
</div>

Answer 3

保持简单。

$(document).ready(function(){
    $(".prod-cat-addt-details-thumbs-div").each(function(){
        var c = $(this).attr("id")[$(this).attr("id").length -1];
        $('#prod-cat-thumb-item-'+c).append($(this).text());
    });
});

使用 jQuery .each() 复制容器

Copying container with jQuery .each()

javascript

each

jquery

clone

append