栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

$(‘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 >    <div >        <ul> <li>John</li> <li>Lennon</li>        </ul>    </div>    <div >        <ul> <li>Paul</li> <li>McCartney</li>        </ul>    </div>    <div >        <ul> <li>George</li> <li>Harrison</li>        </ul>    </div>    <div >        <ul> <li>Ringo</li> <li>Starr</li>        </ul>    </div></div><button>Randomize</button>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/416139.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号