web-dev-qa-db-ja.com

jQueryを使用してdiv要素のシーケンスをランダム化する

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

1つの配列で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]私は。member divのリストの最初の子を取得しようと考えましたが、そうではありません。

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>

これは簡単なはずですが、方法がわかりません:(

助けてください
ありがとう
vittorio

編集：

堅牢性と、選択された子供を取得するこのさまざまな方法に感謝します。今後のこれらの方法をメモします。
この方法を試しましたが、div全体を取得できなかったようです（何か間違えたら教えてください、可能性が高すぎます!!）。

私はこのコンテンツを取得する必要があります：

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

$（ "div.band div.member：eq（2）"）または他の便利な方法のようなこのメソッドの1つを使用すると、次のようになります。

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

私のノードでも。member divコンテナを取得する方法はありますか？

jqueryhtmlsortinghtml-manipulation
54
vitto
$('div.band div.member');

セレクターに一致する<div>を含むjQueryオブジェクト、つまりクラスmemberのdivの子孫であるクラスbandのdivを提供します。

JQueryオブジェクトは配列に似たオブジェクトであり、一致した各要素にはオブジェクトの数値プロパティ（インデックスのようなもの）が割り当てられ、lengthプロパティも定義されます。 1つの要素を取得するには

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

これがWorking Demoです。コードを表示するには、URLに/ editを追加します。機能の詳細が必要な場合は、コメントを残してください。おそらく、特定の状況（プラグインの対象となる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>
94
Russ Cam

Russ Camのソリューションを修正して、セレクターがオプションになり、ランダム化された各要素の親を保持しながら、複数のコンテナー要素で関数を呼び出せるようにしました。

たとえば、各 '.member' div内のすべてのLIをランダム化する場合、次のように呼び出すことができます。

$('.member').randomize('li');

私はこのようにすることもできます：

$('.member li').randomize();

したがって、これを呼び出す2つの方法は次のとおりです。

$(parent_selector).randomize(child_selector);

OR

$(child_selector).randomize();

変更されたコードは次のとおりです。

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};

縮小：

$.fn.randomize=function(a){(a?this.find(a):this).parent().each(function(){$(this).children(a).sort(function(){return Math.random()-0.5}).detach().appendTo(this)});return this};
25
gruppler

ソートを使用したランダム化は、常に要素をランダム化するとは限りません。 配列をシャッフルするにはどうすればよいですか？

これが私の更新されたコードです

(function($) {
    $.fn.randomize = function(childElem) {
        function shuffle(o) {
            for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        };
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

            shuffle(elems);

            $this.detach(childElem);  

            for(var i=0; i < elems.length; i++) {
                $this.append(elems[i]);      
            }
        });    
    }
})(jQuery);
6
whitebrow