jquery - 使用 jQuery 随机化一系列 div 元素

Question

我正在尝试使用 jQuery 完成我的第一步，但我在理解如何从 div 父元素中查找子元素列表时遇到了一些困难。我习惯于使用 ActionScript 2 和 ActionScript 3，所以我可能会弄错一些概念，比如用 jQuery 随机化一系列 div 元素的更好方法是什么!

我有一段简单的 HTML 代码:

<div class="band">
    <div class="member">
        <ul>
            <li>John</li>
            <li>Lennon</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Paul</li>
            <li>McCartney</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>George</li>
            <li>Harrison</li>
        </ul>
    </div>
    <div class="member">
        <ul>
            <li>Ringo</li>
            <li>Starr</li>
        </ul>
    </div>
</div>

我尝试过一些方法来做到这一点，比如在一个数组中映射 .member div，然后更改排序顺序但没有成功。

function setArrayElements (element_parent) {
    var arr = [];
    //alert (element_parent[0].innerHTML);
    for (var i = 0; i < element_parent.children().length; i ++) {
        arr.push (element_parent[i].innerHTML);
    }
}
setArrayElements($(".band"));

当我试图提醒 element_parent[0] 时，我想得到我的 .member 列表中的第一个 child ，但事实并非如此。

如果我使用 element_parent[0].innerHTML 发出警报，我会看到:

<div class="member">
    <ul>
        <li>John</li>
        <li>Lennon</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>Paul</li>
        <li>McCartney</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>George</li>
        <li>Harrison</li>
    </ul>
</div>
<div class="member">
    <ul>
        <li>Ringo</li>
        <li>Starr</li>
    </ul>
</div>

为什么？ 我怎样才能得到这样的成员之一？

<div class="member">
    <ul>
        <li>Paul</li>
        <li>McCartney</li>
    </ul>
</div>

我相信这应该很容易，但我只是不知道怎么做 :(

请帮忙
谢谢
维托里奥

---

编辑:

感谢大家的坚守和各种获取被选中的 child 的方式，以后我会记下这些方式的!
我尝试了这种方法，但似乎无法获得整个 div(如果我弄错了什么，请告诉我，这可能太过分了!!)。

我应该得到这个内容:

<div class="member">
    <ul>
        <li>Ringo</li>
        <li>Starr</li>
    </ul>
</div>

但是使用像 $("div.band div.member:eq(2)") 这样的方法之一或其他有用的方法，我得到了这个:

alert ($('div.band div.member')[0]);
/* result
<ul>
    <li>Ringo</li>
    <li>Starr</li>
</ul>
*/

那么有没有办法在我的节点中也获取 .member div 容器？

Answer 1

$('div.band div.member');

会给你一个包含<div>的jQuery对象匹配选择器即 div 类 member是类别为 band 的 div 的后代.

jQuery 对象是一个类似数组的对象，因为每个匹配的元素都被分配了一个对象的数字属性(类似于索引)和一个 length。属性也被定义。获取一个元素是

// first element
$('div.band div.member')[0];

或

// first element
$('div.band div.member').get(0);

您可以指定根据 DOM 中的位置选择特定元素，而不是选择所有元素。例如

// get the first div with class member element
$("div.band div.member:eq(0)")

或

// get the first div with class member element
$("div.band div.member:nth-child(1)")

编辑:

这是我刚刚搞定的一个插件

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.detach(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

工作代码:

$('button').click(function() {
  $("div.band").randomize("table tr td", "div.member");
});

(function($) {

  $.fn.randomize = function(tree, childElem) {
    return this.each(function() {
      var $this = $(this);
      if (tree) $this = $(this).find(tree);
      var unsortedElems = $this.children(childElem);
      var elems = unsortedElems.clone();

      elems.sort(function() {
        return (Math.round(Math.random()) - 0.5);
      });

      for (var i = 0; i < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });
  };

})(jQuery);

body {
  background-color: #000;
  font: 16px Helvetica, Arial;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="band">
  <table>
    <tr>
      <td>
        <div class="member">
          <ul>
            <li>John</li>
            <li>Lennon</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="member">
          <ul>
            <li>Paul</li>
            <li>McCartney</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="member">
          <ul>
            <li>George</li>
            <li>Harrison</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="member">
          <ul>
            <li>Ringo</li>
            <li>Starr</li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
</div>
<button>Randomize</button>

这是一个 Editable Working Demo 。将 /edit 添加到 URL 以查看代码。如果您需要有关其工作原理的任何详细信息，请发表评论。它可能会变得更健壮以处理某些情况(比如插件被连接到的 jQuery 对象是否有其他子元素)，但它会满足您的需求。