用jQuery随机化一系列div元素 [英] Randomize a sequence of div elements with jQuery

查看：93
本文介绍了用jQuery随机化一系列div元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图用jQuery来完成我的第一步，但是我很难理解如何从div父元素中找到子元素的列表。我习惯使用ActionScript 2和ActionScript 3，所以我可能会误解一些概念，比如用jQuery随机化一系列div元素的更好方法！



我有这个HTML代码的简单部分：

 < div class =band> 
< div class =member> 
< ul> 
< li>约翰< / li> 
< li>列侬< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> Paul< / li> 
< li> McCartney< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> George< / li> 
< li>哈里森< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> Ringo< / li> 
< li> Starr< / li> 
< / ul> 
< / div> 
< / div>

我尝试了一些方法来执行map .member div 

 函数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 列表的div的第一个孩子，但它不是。

如果我使用 element_parent [0] .innerHTML 我看到：

 < div class =member> 
< ul> 
< li>约翰< / li> 
< li>列侬< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> Paul< / li> 
< li> McCartney< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> George< / li> 
< li>哈里森< / 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>

我相信这应该很简单，但我不知道
： （b / b）

please help


thanks
vittorio





编辑：



感谢您选择孩子的坚定性和多种方式，我会请注意这些未来的方法！

我尝试了这种方法，但似乎我无法得到整个div（请告诉我，如果我误了某些东西，它可能太多了可能!!）。

我应该得到这个内容：

pre $

< 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 strong> div容器也在我的节点？

解决方案

  $（'div.band div 。会员'）;

会给你一个包含< div> 匹配选择器，即div与类成员，它们是类 band 的div的后代。

jQuery对象是一个类似数组的对象，因为每个匹配的元素都被分配了一个数字属性（像索引一样）并且一个长度属性也被定义。获得一个元素是

  //第一个元素
 $（'div.band div.member'）[0 ]。

或

  //第一个元素
 $（'div.band div.member'）。get（0）;

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

  //获得第一个带有类成员元素的div 
 $（div.band div.member： eq（0））

或

  //获得带有类成员元素的第一个div 
 $（div.band div.member：nth-​​child（1））
  
 
 
 编辑： 
 
 
 
这里有一个插件，我只是敲出来
 
 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ {
 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）; 
 
为（var i = 0; i< elems.length; i ++）
 $ this.append（elems [i]）; 
 
}）; 
} 
}）（jQuery）;

以下是 工作演示 。将 / edit 添加到URL以查看代码。如果您需要关于它如何工作的任何细节，请留下评论。它可能可以做得更健壮一些，以处理某些情况（例如，如果有其他孩子的jQuery对象的插件是chianed），但它会满足您的需求。

演示代码 

  $（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>约翰< / li> 
< li>列侬< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> Paul< / li> 
< li> McCartney< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> George< / li> 
< li>哈里森< / li> 
< / ul> 
< / div> 
< div class =member> 
< ul> 
< li> Ringo< / li> 
< li> Starr< / li> 
< / ul> 
< / div> 
< / div> 
<按钮>随机化< /按钮>


I'm trying to do my frist steps with jQuery but I have some trouble to understand how to find a list of child elements from a div parent element. I'm used to work with ActionScript 2 and ActionScript 3 so i could mistake some concept, like what is the better way to randomize a sequence of div elements with jQuery!

I have this simple portion of HTML code:

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

I have attempted some way to do that like map .member divs in one array and then changing the sort order but without success.

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

when i attempted to alert element_parent[0] i thought to get the first child of my .member list of divs but it isn't.

if i make an alert with element_parent[0].innerHTML i see that:

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

Why? How can I do to get exactly one of the members like this?

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

I'm sure this should be easy but I just don't know how :(

please help
thanks
vittorio

EDIT:

Thanks for the fastness and this various ways to get the selected children, I'll take a note of these ways for the future!
I tried this methods, but it seems I couldn't get the entire div (please tell'me if i mistake something, it' could be too much possible!!).

I shoud get this content:

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

but with one of this methods like $("div.band div.member:eq(2)") or the other useful ways, I get this:

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

so is there a way to get the .member div container too in my node?

解决方案 

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

will give you a jQuery object containing <div> that match the selector i.e. div with class member that are descendents of a div with class band.

The jQuery object is an array-like object in that each matched element is assigned a numerical property (think like an index) of the object and a length property is also defined. To get one element is

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

or

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

Instead of selecting all elements, you can specify to select a specific element according to position in the DOM. For example

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

or

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

EDIT:

Here's a plugin I just knocked out

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

Here's a Working Demo. add /edit to the URL to see the code. If you need any details about how it works, please leave a comment. It could probably do with being made more robust to handle certain situations (like if there are other child elems of the jQuery object the plugin is chianed to) but it'll suit your needs.

Code from the demo

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

这篇关于用jQuery随机化一系列div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆