如何实现页面加载时打乱合作伙伴画廊父DIV组且子元素不错乱？

你的问题出在当前脚本打乱的是.ba-feature-grid-layout下的所有直接子元素，而这些子元素是单个合作伙伴的拆分组件（比如logo、名称、链接容器），而非完整的合作伙伴项，所以才会出现信息对应错乱的情况。

正确的思路是：找到包裹单个合作伙伴所有信息的完整容器节点，然后打乱这些容器的顺序，这样每个合作伙伴的logo、名称、链接会作为一个整体被重新排序。

修正后的脚本 #

假设每个完整的合作伙伴项的类是.ba-feature-item（根据常见画廊结构结合你的层级图推断，你可以根据实际DOM结构调整这个选择器），修正代码如下：

$(document).ready(function() {
  // 选中包裹单个合作伙伴的完整容器集合
  var parent = $('.ba-feature-grid-layout');
  var items = parent.children('.ba-feature-item'); // 改为选中完整的合作伙伴项
  // 打乱完整项的顺序
  while (items.length) {
    parent.append(items.splice(Math.floor(Math.random() * items.length), 1)[0]);
  }
});

关键说明 #

• 核心是选中完整的合作伙伴容器，而不是容器内部的拆分元素。你需要确认DOM结构中，每个合作伙伴的所有信息（logo、名称、链接）都被同一个父容器包裹，把选择器替换成这个容器的类或ID即可。
• 原代码的divs = parent.children()会选中所有子元素，包括单独的logo、名称等，导致拆分打乱；修正后只选中完整的项，保证每个合作伙伴的信息作为整体被排序。

如果你的完整合作伙伴项不是.ba-feature-item，可以通过浏览器开发者工具查看DOM结构，找到对应的容器选择器替换即可。

内容的提问来源于stack exchange，提问作者Vanderlei