Question

我有这个代码结构：

<div class="social-1"></div>

<div class="social-feed-container">
 <div class="social-feed-element"></div>
 <div class="social-feed-element"></div>
 <div class="social-feed-element"></div>
 <div class="social-feed-element"></div>
 <div class="social-feed-element"></div>
 <div class="social-feed-element"></div>
</div>

我需要将前三个div与类social-feed-element切成这个列表，并在div中显示为social-1类。这是我的JQuery，但它似乎不起作用。我在这做错了什么？

$(window).on('load', function(){
     splitThree();
 });

function splitThree() {
    var firstThree = $(".social-feed-element");
    for (var i = 0; i < firstThree.length; i += 3) {
        firstThree.slice(i, i + 3).wrapAll("<div class='new'></div>");
        $("<div class='new'></div>").appendTo('.social-1'); 
    }
}

Answer 1

你有正确的方法，你只是让代码变得比它需要的复杂得多。您可以在一行中实现所需。

您的代码示例似乎也试图将元素包装在另一个容器中，尽管描述没有提到该行为。如果您还需要此功能，则可以使用wrapAll()：

$('.social-feed-container .social-feed-element').slice(0, 3).appendTo('.social-1').wrapAll('<div class="new"></div>');

.social-1, .social-feed-container {
  border: 1px solid #C00;
}
.new {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-1"></div>

<div class="social-feed-container">
  <div class="social-feed-element">1</div>
  <div class="social-feed-element">2</div>
  <div class="social-feed-element">3</div>
  <div class="social-feed-element">4</div>
  <div class="social-feed-element">5</div>
  <div class="social-feed-element">6</div>
</div>

使用JQuery slice（）和appendTo（）在另一个div中显示数据

1 个答案: