57

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を 1 つの配列にマップし、並べ替え順序を変更するなど、何らかの方法でそれを試みましたが、成功しませんでした。

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>

なんで？このようなメンバーの 1 つを正確に取得するにはどうすればよいですか?

<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)")のようなこのメソッドの 1 つまたは他の便利な方法を使用すると、次のようになります。

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

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

4

5 に答える 5

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

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

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

作業コード:

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

これは編集可能な作業デモです。コードを表示するには、URL に/editを追加します。操作方法の詳細が必要な場合は、コメントを残してください。おそらく、特定の状況 (プラグインが接続されている jQuery オブジェクトの他の子要素がある場合など) を処理するために、より堅牢にすることができますが、ニーズに合うでしょう。

于 2009-10-07T20:20:05.243 に答える
36

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

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

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

次のようにすることもできます。

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

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

$(parent_selector).randomize(child_selector);

また

$(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};
于 2012-08-01T19:43:42.373 に答える
8

sort を使用したランダム化は、常に要素をランダム化するとは限りません。How can I shuffle an array? のようなシャッフル メソッドを使用することをお勧めします。

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

(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);
于 2014-08-05T14:08:21.090 に答える
1

jqueryなしで実行しても問題ない場合に備えて：

/** @param {HTMLElement} parent */
const shuffleChildren = (parent) => {
    const cards = [...parent.children];
    for (const child of cards) {
        const newPlace = Math.floor(Math.random() * cards.length);
        parent.insertBefore(child, cards[newPlace + 1] || null);
    }
};

（jqueryに関係のない回答は、これと重複しているため、ここに投稿してください）

于 2020-10-25T17:34:17.040 に答える