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

Posted 2023-02-23

【中文标题】使用 JQuery slice() 和 appendTo() 在另一个 div 中显示数据

【英文标题】：Use JQuery slice() and appendTo() to show data in another div

【发布时间】：2018-07-23 23:43:08

【问题描述】：

我有这样的代码结构：

<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>

我需要将前三个具有类 social-feed-element 的 div 从该列表中切出并显示在具有类 social-1 的 div 中。这是我的 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'); 
    
 

【问题讨论】：

究竟是什么不起作用？

你能再多描述一下“似乎不起作用”吗？

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

【讨论】：

我试图包装它，因为我的代码似乎都没有工作。 :( 我试过你的代码，这似乎也不起作用。社交提要是我用来显示来自我的社交帐户的 twitter 和 fb 帖子的插件。我是否应该尝试在窗口加载时执行此操作而不是文档准备好你认为因为它是一个插件吗？@RoryMcCrossan

从上面的 sn-p 中可以看出，当页面加载时，这适用于 DOM 中可用的元素。它很可能不适用于您的情况，因为插件在 document.ready 事件触发后动态添加元素。我建议检查他们的文档以了解您可以挂钩的事件，以了解它何时完成工作。如果没有，那么您可能只需要使用 setTimeout() 在设定的延迟上运行您的逻辑

所以在窗口加载时它似乎工作了！ ：） 谢谢！我猜是因为在文档准备就绪时，插件中的数据还没有。