Question

我需要帮助处理具有不同类名的大型兄弟元素列表。

获取具有相同类名的元素数量并将它们放入数组
查找该类组中的第一个元素（可以是数字或名称）。
运行函数的语句：if element = group的第一个元素执行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>

Answer 1

编辑：您的要求非常具体。下面只是一个循环遍历所有子节点的示例，并将计数和第一个元素存储在匹配计数中。让我

$(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});
});

DEMO： 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`

Answer 2

要获取具有相同类名的所有元素，您只需使用简单的jQuery选择器。返回的值是一个包含所有匹配元素的数组。

var groupA = $(".groupA");

要获取所需的项目数，只能访问数组的长度参数。

var groupALength = groupA.length;

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

var firstElement = $(".groupA:first");

Answer 3

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

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

现在应该留下包含所有项目的数组数组。要查看此操作，您可以查看this jsFiddle。

Answer 4

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"]等（jQuery集合：$(groups["groupB"])）访问组中的所有元素，并通过groups["groupC"][0]访问第一个元素。组中元素的数量只是数组的length。

请注意，这会将所有元素放在组"item1"中 - 我不知道您需要该类。

计算所有具有相同未知类名的兄弟元素

4 个答案: