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

Question

我需要帮助处理具有不同类名的大量同级元素。

1. 获取具有相同类名的元素数量并将其放入数组中
2. 查找该类组中的第一个元素(可以是数字或名称)。
3. 运行函数的语句:if element = first element of 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>

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

演示: http://jsfiddle.net/LhwQ4/1/

---

我认为您需要的是使用 slider 的上下文来获取子元素..见下文，

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`