2

クラス名が異なる兄弟要素の大きなリストを操作するのに助けが必要です。

  1. 同じクラス名を持つ要素の数を取得して配列に入れる
  2. そのクラス グループ内の最初の要素を検索します (これは数値または名前の場合があります)。
  3. 関数を実行するステートメント: if element = group do の最初の要素console.log("first element");

最初の 3 つのクラスの例を次に示しますが、これは groupA から Groupz に移動します

<div class = 'slider'>
    <div class = 'item1 groupA'> <!-- Start Group A -->
        <img  src='xyz'  />
    </div>
    <div class = 'item1 groupA'>
        <img  src='xyz'  />
    </div>                  
    <div class = 'item1 groupA'>
        <img  src='xyz'  />
    </div>                  
    <div class = 'item1 groupA'>
        <img  src='xyz'  />
    </div>
    <div class = 'item1 groupB'> <!-- Start Group B -->
        <img  src='xyz'  />
    </div>
    <div class = 'item1 groupB'>
        <img  src='xyz'  />
    </div>                  
    <div class = 'item1 groupB'>
        <img  src='xyz'  />
    </div>                  
    <div class = 'item1 groupC'> <!-- Start Group C -->
        <img  src='xyz'  />
    </div>          
    <div class = 'item1 groupC'>
        <img  src='xyz'  />
    </div> <!-- All the way to group Z -->
</div>
4

4 に答える 4

3

編集：あなたの要件は非常に具体的です。以下は、すべての子をループして、一致するカウントにカウントと最初の要素を格納するサンプルです。私にさせて

$(function () {
    $.fn.benton = function () {
        //just the immediate childrens
        var $chds = $(this).children();

        var lc = {
            firstEl: {},
            classCount: {}
        };

        $.each ($chds, function (idx, el) {
            if (el.className) {
               var tokens = el.className.split(' ');
               for (var i = 0; i < tokens.length; i++) {
                   if (lc.classCount.hasOwnProperty(tokens[i])) {
                       lc.classCount[tokens[i]] += 1;
                   } else {
                       lc.classCount[tokens[i]] = 1;
                       lc.firstEl[tokens[i]] = $(el);
                   }
               }
            }
        });

        return lc;                   
    };

    var stats = $('.slider').benton();
    console.log(stats.classCount['groupA']);
    stats.firstEl['item1'].css({border: '1px solid red', width: 100, height: 10});
});

デモ: http://jsfiddle.net/LhwQ4/1/

必要なのは、スライダーのコンテキストを使用して子要素を取得することだと思います..以下を参照してください。

var $slider = $('.slider')

$slider コンテキストを使用して、

$('.groupA', $slider)
//Returns Array of jQuery object with elements has class `groupA`

$('.groupA:first', $slider)
//Returns first element in collection of element with class `groupA`
于 2012-09-17T19:16:51.660 に答える
1

同じクラス名を持つすべての要素を取得するには、単純な jQuery セレクターを使用するだけで済みます。返される値は、一致するすべての要素を含む配列です。

var groupA = $(".groupA");

アイテムの数を取得するには、配列の長さパラメーターにアクセスするだけで済みます。

var groupALength = groupA.length;

:first一致した要素の最初の要素のみを抽出する場合は、jQuery のセレクターを使用できます。

var firstElement = $(".groupA:first");
于 2012-09-17T19:09:37.373 に答える
0

さて、このソリューションは非常にデリケートです。私はあなたの HTML についていくつかの仮定をしています。

あなたの例では、各アイテムに のクラスを与えましたitem1。これは、要素をコピーして貼り付けるだけの問題だと思います。1 つのセレクターですべてのアイテムを取得できるように、各「アイテム」は同じクラスを持つ必要があります。私の例では、 のクラスを想定していitemます。

このitemクラスと追加の「グループ」クラスのみが存在する必要があります。アイテムに指定された他のクラスは、このソリューションを無効にします。

// fetch ALL items
var allItems = $(".item");

// initialize groups array
var groups = {};

$.each(allItems,function(index,elem){
  var item = $(this);
  var itemClass = item.attr('class');

  // remove the "item" class and any leftover whitespace
  itemClass = $.trim(itemClass.replace('item','')); // should now be groupA/groupB...

  // add item to array at the index of the group
  if (groups[itemClass] == undefined){
    groups[itemClass] = [];
  }

  groups[itemClass].push(item);
});

すべてのアイテムを含む配列の配列が残っているはずです。これを実際に確認するには、この jsFiddleを確認してください。

于 2012-09-17T19:36:38.290 に答える
0 
var groups = {};
$(".slider").children().each(function(i, el) {
    var classes = el.className.split(/\s+/);
    for (var i=0; i<classes.length; i++)
        if (classes[i] in groups)
            groups[classes[i]].push(el);
        else
            groups[classes[i]] = [el];
});

groups["groupA"]これで、 etc (jQuery コレクション: $(groups["groupB"])) を介してグループのすべての要素にアクセスし、 を介して最初の要素にアクセスできますgroups["groupC"][0]。グループ内の要素の量はlength、配列の量です。

これにより、すべての要素がグループに入れられることに注意して"item1"ください。そのクラスが何のために必要なのかわかりません。

于 2012-09-17T19:41:49.253 に答える