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;

如果你只想提取任何匹配元素的第一个元素，你可以使用 jQuery 的:first选择器。

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

好的，所以这个解决方案非常敏感。我正在对您的 HTML 做一些假设。

在您的示例中，您为每个项目提供了一个item1. 我假设这只是复制和粘贴元素的问题。每个“项目”应该具有相同的类，以便您可以使用一个选择器检索所有项目。对于我的例子，我假设一个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 回答