Question

我只是试图抓住页面上的一些特定元素并将它们全部包装在自己独特的div中。

正如您所看到的，每个元素都包含在自己的包装器中，并且具有唯一的类。我正在使用Jquery。我想知道是否有更清洁的方法来做到这一点？它的工作原理只是......笨重......

感谢您的帮助！

$('#post-178439 .duplicate').wrapAll('<div class="diamondLinkWrapper1" />');
$('#post-178443 .duplicate').wrapAll('<div class="diamondLinkWrapper2" />');
$('#post-178395 .duplicate').wrapAll('<div class="diamondLinkWrapper3" />');
$('#post-178447 .duplicate').wrapAll('<div class="diamondLinkWrapper4" />');
$('#post-178451 .duplicate').wrapAll('<div class="diamondLinkWrapper5" />');
$('#post-178455 .duplicate').wrapAll('<div class="diamondLinkWrapper6" />');
$('#post-178431 .duplicate').wrapAll('<div class="diamondLinkWrapper7" />');
$('#post-178435 .duplicate').wrapAll('<div class="diamondLinkWrapper8" />');

Answer 1

var mlIds = [178439, 178443, 178395, 178447, 178451, 178455, 178431, 178435];

for(var i=0; i<mlIds.length; i++) {
    $('#post-' + mlIds[i] + ' .duplicate').wrapAll('<div class="diamondLinkWrapper'+ i +'"/>');
}

试试这个...... 把你的id放在一个数组中并使用for循环，也将每个索引应用到你的类

Answer 2

你需要收集你想要改变的所有div，并循环遍历它们：

var divs = $('[id^="post-"]').find('.duplicate');
console.log(divs);
var counter = 1;
$.each(divs, function(){
    $(this).wrap('<div class="diamondLinkWrapper' + counter + '" />');
    counter++;
});

这是一个小提琴：https://jsfiddle.net/cjk8k7bw/1/

  var divs = $('[id^="post-"]').find('.duplicate');
  console.log(divs);
  var counter = 1;
  $.each(divs, function(){
      $(this).wrap('<div class="diamondLinkWrapper' + counter + '" />');
      counter++;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-1234"><div class="duplicate">content</div></div>
<div id="post-2345"><div class="duplicate">content</div></div>
<div id="post-3456"><div class="duplicate">content</div></div>
<div id="post-4567"><div class="duplicate">content</div></div>
<div id="post-5678"><div class="duplicate">content</div></div>
<div id="post-6789"><div class="duplicate">content</div></div>
<div id="post-7890"><div class="duplicate">content</div></div>
<div id="post-8901"><div class="duplicate">content</div></div>
<div id="post-9101"><div class="duplicate">content</div></div>
<div id="post-1011"><div class="duplicate">content</div></div>
<div id="post-1213"><div class="duplicate">content</div></div>
<div id="post-1314"><div class="duplicate">content</div></div>
<div id="post-1516"><div class="duplicate">content</div></div>

Answer 3

您需要做的是使用for循环。对于我的例子，我将循环数设置为8，因为这是您在上面提供的行数。

for(var i=0; i<=8; i++){
    $('#post-178439 .duplicate').wrapAll('<div class="diamondLinkWrapper'+i +'"/>');
}

如果您需要更高的数字，请将for循环的第二个参数更改为您需要的数字。

更好地“将所有”元素“包装”为具有唯一类名的自己的div？

3 个答案: