Question

在此次修订之前，我试图在其他几个节点中复制一个特定节点，但我遇到了不希望的重复

var data = {
    "id": "1",
    "username": "user5613506",
    "data": {
        "items": [
            {
                "id": 1,
                "name": "Item #1",
                "picture": "assets/images/thumbnails/item1.jpg",
                "group": "group1",
                "amount": 2,
            },
            {
                "id": 2,
                "name": "Item #2",
                "picture": "assets/images/thumbnails/item2.jpg",
                "group": "group2",
                "amount": 3,
            }
        ]
    }
};

var index = 0;

$( 'button' ).click( function() {
  
  index++;

  if( index >= data.data.items.length ) index = 0;

  var $elements = $( '#elements' );
  var $icon = $elements.children( 'img.' + data.data.items[ index ].group ).slice( 0, 1 );

  $elements.children( 'img' ).addClass( 'hidden' );

  for( var i = 0; i < data.data.items[ index ].amount; i++ ) {
    $icon.clone().removeClass( 'hidden' ).appendTo( $elements );
  }
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
  <img src="http://i.imgur.com/TuHUIAC.gif" class="group1 hidden" />
  <img src="http://i.imgur.com/dUeBcoU.png" class="group2 hidden" />
</div>

<button>Click Me</button>

同样在JSFiddle;）

下面有一些评论，代码不再基于可用的类（如果你很好奇，请参阅修订^ _ ^）。

在旧版本中，第一次单击<button>时，index变量定义的指针指向JSON的第二个条目，一切正常。

再次点击按钮时，不是隐藏/删除之前添加的元素，而是添加新的元素。因此，连续点击会累积节点，使用渐进式复制打破整个布局。

现在，在此之前，我通过将隐藏类添加到所有节点来隐藏所有节点。然后，使用更高效的选择器集，我找到唯一一个具有匹配JSON中某个值的特定类的图像，然后根据需要多次克隆它，在追加之前删除隐藏类它到父节点。

然而，现在出现了新问题，现在我不得不使用jQuery.slice（）来获取第一个也是唯一一个匹配节点作为克隆的基础，因为尽管工作，所有节点仍然是在隐藏它们的DOM中。

在这个示例中，这不是问题，JSON中只有两个条目，但是当该条目变大时，可能包含数百个项目，并且由于某些奇怪的原因，用户决定无限期地单击按钮DOM可能会变得太拥挤，可能因内存溢出而导致浏览器崩溃。

那我怎么解决这个部分呢？

Answer 1

仅定位副本的隐藏元素，然后仅从克隆中删除该类：

$('button').click(function() {
  $(".elements img.hidden").each(function() {
    var $this = $(this);
    if ($this.hasClass('image3')) {
      for (var i = 1; i < 3; i++) {
        $this.clone().removeClass('hidden').appendTo($this.parent());
      }
    }
  });
});

JSFiddle：https://jsfiddle.net/TrueBlueAussie/689qn979/1/

Answer 2

自从appendTo（）仍然在循环内部以来，不是最优雅的解决方案或具有最佳性能，但是在克隆过程中使用特定类删除所有元素都可以解决问题：

＆＃13;

var data = {
    "id": "1",
    "username": "user5613506",
    "data": {
        "items": [
            {
                "id": 1,
                "name": "Item #1",
                "picture": "assets/images/thumbnails/item1.jpg",
                "group": "group1",
                "amount": 2,
            },
            {
                "id": 2,
                "name": "Item #2",
                "picture": "assets/images/thumbnails/item2.jpg",
                "group": "group2",
                "amount": 3,
            }
        ]
    }
};

var index = 0;

$( 'button' ).click( function() {
  
  index++;

  if( index >= data.data.items.length ) index = 0;

  var $elements = $( '#elements' );
  var $icon = $elements.children( 'img.' + data.data.items[ index ].group ).slice( 0, 1 );

  $elements.find( '.cloned' ).remove();

  $elements.children( 'img' ).addClass( 'hidden' );

  for( var i = 0; i < data.data.items[ index ].amount; i++ ) {
    $icon.clone().removeClass( 'hidden' ).addClass( 'cloned' ).appendTo( $elements );
  }
});

＆＃13;

.hidden { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
  <img src="http://i.imgur.com/TuHUIAC.gif" class="group1 hidden" />
  <img src="http://i.imgur.com/dUeBcoU.png" class="group2 hidden" />
</div>

<button>Click Me</button>

＆＃13;

重复元素N次重复

2 个答案: