使用jQuery将div元素序列随机化

一尘不染

使用jQuery将div元素序列随机化

html

我正在尝试使用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>

我尝试了某种方法来执行此操作，例如将map .member divs放在一个数组中，然后更改排序顺序，但没有成功。

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]时， 我想获取div的 .member 列表的第一个孩子，但事实并非如此。

如果我使用 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>

我敢肯定这应该很容易，但是我不知道怎么做:(

编辑：

感谢您的牢度和以各种方式让被选中的孩子，我将在以后记下这些方式！我尝试了这种方法，但似乎无法获得整个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容器？

阅读 655

2020-05-10

共1个答案

一尘不染

$(‘div.band div.member’);

将为您提供一个jQuery对象，其中包含<div>与选择器匹配的jQuery对象，即与class
member相同的div是与class的div的后代band。

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

这是一个 工作示例 。将 /edit添加到URL以查看代码。如果您需要有关其工作原理的任何详细信息，请发表评论。它可能可以使它在处理某些情况时更加健壮（例如，如果该插件希望连接到jQuery对象的其他子元素），但它会满足您的需求。

演示中的代码

$(function() {

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

});

(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.remove(childElem);

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

  });    
}
})(jQuery);

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>
<button>Randomize</button>

2020-05-10