jQuery 使用随机的兄弟类来对它们执行操作？

Question

我们有很多兄弟姐妹，它们不能放在单独的 Div 中。它们被随机的类名分成几个不同的组。

在 jQuery 中标记组中的第一个很容易，但是如何获取组的类名并使用我必须使用的名称？

这就是它的样子

---

更新：这些组完全混淆了。就像一副纸牌。

最终结果最好是使用 jQuery 获取所有组。 Next jQuery 现在拥有了存在哪些组的所有数据。然后它标记该组的第一个（按 DOM 顺序）。

问题是它们也应该保持混合状态。

---

组的意思是：不同的类。一组由同一组类的 Div 定义。

---

<div class="group-456 fav"></div>
<div class="group-855 fav"></div>
<div class="group-143 fav"></div>
<!-- unnecessary line break -->
<div class="group-616 fav"></div>
<div class="group-143 fav"></div>
<div class="group-855 fav"></div>
<!-- unnecessary line break -->
<div class="group-855 fav"></div>
<div class="group-616 fav"></div>
<div class="group-456 fav"></div>
<!-- unnecessary line break -->
<div class="group-616 fav"></div>
<div class="group-143 fav"></div>
<div class="group-456 fav"></div>

这是我整理的

var detect = $('div').each(function(){
    $(this).attr('class');
});
console.log(detect);

$('.fav').first().css({background: 'lightcoral'});

这是来自stackoverflow

var check = "group-";
$('div').each(function(){
    var className = this.className;

    var cls = $.map(this.className.split(' '), function (val, i) {
        if (val.indexOf(check) > -1) {
            return val.slice(check.length, val.length)
        }
    });

    console.log(cls.join(' '));
});

// https://stackoverflow.com/questions/18159121/jquery-get-the-rest-of-the-elements-class-name-that-starts-with-string-whateve

Answer 1

假设 DIV 按组顺序排列，您可以遍历每个 div 并将该组与前一个 div 的组值进行比较 - 如果它们不同，则它是一个新组：

var grp = "";
$(".fav").each(function() {
    var thisgrp = getgroup(this);
    if (grp != thisgrp) $(this).addClass("markit")
    grp = thisgrp;
})

getgroup() 是您现有的提取组 ID 的代码（带有额外的 return cls;）

小提琴：https://jsfiddle.net/25twmquy/ 和下面的 sn-p

function getgroup(el) {
  var check = "group-";
  var className = el.className;

  var cls = $.map(className.split(' '), function(val, i) {
    if (val.indexOf(check) > -1) {
      return val.slice(check.length, val.length)
    }
  });

  return cls.join(" ");
}

var grp = "";
$(".fav").each(function() {
  var thisgrp = getgroup(this);
  if (grp != thisgrp) $(this).addClass("markit")
  grp = thisgrp;
})

.fav {
  height: 10px;
  width: 100px;
  border: 1px solid #CCC;
}

.markit {
  background-color: coral;
  margin-top: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-456 fav count-2"></div>
<div class="group-456 fav count-1"></div>
<div class="group-456 fav count-3"></div>

<div class="group-143 fav count-4"></div>
<div class="group-143 fav count-2"></div>
<div class="group-143 fav count-1"></div>

<div class="group-855 fav count-4"></div>
<div class="group-855 fav count-2"></div>
<div class="group-855 fav count-1"></div>

<div class="group-616 fav count-4"></div>
<div class="group-616 fav count-2"></div>
<div class="group-616 fav count-1"></div>

Answer 2

试试这个：

var prevclass = '';
$('div').each(function(){
    var newClass = $(this).attr('class').split(' ')[0];
    if(newClass!=prevclass){
      prevclass = newClass;
      console.log(newClass);
    }
});

$('.fav').first().css({background: 'lightcoral'});

div{ width:100%; height:20px;border:1px solid; margin:1px 0px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-456 fav count-2"></div>
<div class="group-456 fav count-1"></div>
<div class="group-456 fav count-3"></div>

<div class="group-143 fav count-4"></div>
<div class="group-143 fav count-2"></div>
<div class="group-143 fav count-1"></div>

<div class="group-855 fav count-4"></div>
<div class="group-855 fav count-2"></div>
<div class="group-855 fav count-1"></div>

<div class="group-616 fav count-4"></div>
<div class="group-616 fav count-2"></div>
<div class="group-616 fav count-1"></div>

Answer 3

您可以使用unique 和map 将它们组合在一起。并且每组的第一个元素是bold：

//remove other class names
$('.fav').removeClass(function(index, className) {
  return className.replace(/^group-[\d]/, '');
});

// Get all the classes
var classes = $('[class^=group]').map(function() {
  return $(this).attr('class');
});

// Filter only unique ones
var uniqueClasses = $.unique(classes);

// Now group them
$(uniqueClasses).each(function(i, v) {
  $('.' + v).wrapAll('<div class="parent-' + i + '"></div>');
  $('.parent-' + i + ' div:first').addClass('bold');
});

.parent-0 {
  background: orange;
  padding: 10px;
}

.parent-1 {
  background: red;
  padding: 10px;
}

.parent-2 {
  background: green;
  padding: 10px;
}

.parent-3 {
  background: blue;
  padding: 10px;
}

.bold {
  color: #FFF !important;
  font-weight: bold;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-456 fav count-2">456</div>
<div class="group-456 fav count-1">456</div>
<div class="group-456 fav count-3">456</div>

<div class="group-143 fav count-4">143</div>
<div class="group-143 fav count-2">143</div>
<div class="group-143 fav count-1">143</div>

<div class="group-855 fav count-4">855</div>
<div class="group-855 fav count-2">855</div>
<div class="group-855 fav count-1">855</div>

<div class="group-616 fav count-4">616</div>
<div class="group-616 fav count-2">616</div>
<div class="group-616 fav count-1">616</div>

Answer 4

var classes = [];
var source = document.querySelectorAll('.fav');

function wrapElements(src, reference, wrapper){
    src.forEach(function(e){
        var elementClasses = e.getAttribute('class').split(" ");
        elementClasses.forEach(function(className){
            if(className.indexOf(reference) !== -1 && classes.indexOf(className) === -1){
                classes.push(className);
            }
        });
    });

    $.each(classes, function(index, value){
        // do whatever you want with the new groups. e.g. group them by class name in a section element:
        $('.' + value).wrapAll('<div class="section">');
    });
}

wrapElements(source, "group-");