jQuery：如果为XYZ，则向此AND下一个元素添加类

Question

我有一个无序的列表，列表项的数量未知，顺序未知。

我需要找到一个类别为.colspan的列表项，查看其后的项是否也具有该类别，然后根据跟随的人数添加一个类别。

如果仅靠1个，请给li另外一个类1-col。

如果连续有两个，2-col。

如果连续三个，3-col。

我一次不需要超过3个。

例如...

之前：

<ul>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
</ul>

之后：

<ul>
  <li class="colspan 1-col">content</li>
  <li class="other">content</li>
  <li class="colspan 2-col">content</li>
  <li class="colspan 2-col">content</li>
  <li class="other">content</li>
  <li class="colspan 3-col">content</li>
  <li class="colspan 3-col">content</li>
  <li class="colspan 3-col">content</li>
  <li class="other">content</li>
</ul>

我假设我以某种方式使用.next()？然后，当然是.addClass()。我喜欢的那部分。试图弄清楚如何应用1-col，2-col，3-col这是一个挑战。

任何帮助将不胜感激！

Answer 1

这将起作用（使用nextUntil（）使其非常简洁）：

$(function(){
  $("li").each(function(index) {
    if($(this).hasClass("colspan") && !$(this).is('[class*="col-"]'))
    {
      var count = $(this).nextUntil(":not(.colspan)").length + 1;
      $(this).addClass("col-" + count);
      $(this).nextUntil(":not(.colspan)").addClass("col-" + count);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
</ul>

它也不受可能遇到的colspan数量的限制，并且不使用示例类“ other”进行匹配。 （如果没有colspan作为类，则匹配。）

Answer 2

一种可能性是拥有一个递归函数，该函数可以对colspan类中的下一个元素进行计数。遍历所有colspan，检查.prev元素是否为colspan。如果是，则将类名设置为先前元素的-col类，否则用当前的colspan调用递归函数（它将是{{1}任何系列中的第一个） } s）：

colspan

const getCount = (elm) => {
  const next = elm.next();
  return next.hasClass('colspan')
  ? 1 + getCount(next)
  : 0
};
  
$('.colspan').each(function() {
  const $this = $(this);
  const $prev = $this.prev();
  $this.addClass(
    $prev.hasClass('colspan')
    ? $prev.attr('class').split(' ')[1]
    : 'col-' + (1 + getCount($this))
  )
});
console.log($('ul').html());

Answer 3

这里是您的需求演示。我所做的是将其设置为全局变量，然后检查类colspan并动态添加该类

let colspan = 1;
let other = 0;
$("ul li").each(function(){
  if($(this).hasClass("colspan")){
    $(this).addClass(colspan+"-col");
    other+=1
  }
  else{
   if(other>0){colspan +=1}
   
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
</ul>

Answer 4

您在这里。

var skip=0;
var myUL = $('ul li');
myUL.each(function(index){
if(skip > 0) skip--;
else{
  if($(this).hasClass('colspan')){
    var i=index;
    var count=1;
    while(i<myUL.length){
      if(myUL.eq(i + 1).hasClass('colspan')){
        count++;
        i++;
      }
      else break;  
    }
    for(j=index;j<i+1;j++) myUL.eq(j).addClass(count+'-col');
    skip=i-index;
  }
}
})
console.log($('ul').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="colspan">content</li>
  <li class="other">content</li>
</ul>

Answer 5

如果您的colspan LI中有任何分隔符，例如other类LI，请检查它，然后可以使用prevUntil和nextUntil来做到这一点：

$('ul li').each(function (k, v) {
var that = $(this);
if (that.hasClass('other')) {
 var u = that.prevUntil('.other');
 u.addClass(u.length + '-col');
 var u = that.nextUntil('.other');
 u.addClass(u.length + '-col');
}
});

console.log($('ul').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="colspan">content</li>
 <li class="other">content</li>
 <li class="colspan">content</li>
 <li class="colspan">content</li>
 <li class="other">content</li>
 <li class="colspan">content</li>
 <li class="colspan">content</li>
 <li class="colspan">content</li>
 <li class="other">content</li>
</ul>

没有prevUntil和nextUntil

var i = 1;
$('ul li').each(function (k, v) {
 var that = $(this);
 if (that.hasClass('colspan')) {
  that.addClass(i + '-col');
 } else {
  i++;
 }    
});

Answer 6

首先，有效的CSS类名称不能以数字开头。因此，我将对它们使用后缀，即col-1

非jQuery解决方案： https://plnkr.co/edit/HXfeTJVFlbYI5C2om79l?p=preview

let group = []

document.querySelectorAll('li').forEach(li => {
  if (li && Array.from(li.classList).includes('colspan')) {
    group.push(li)
  }
  else {
    group = []
  }

  group.forEach(element => {
    element.classList.add('col-' + group.length)
  })
})

如果您只想在必要时更新班级列表：

let group = []
let lis = document.querySelectorAll('li')

lis.forEach((li, index) => {
  if (index === lis.length - 1) {
    group.push(li)
  }

  if (li && Array.from(li.classList).includes('colspan') && index < lis.length - 1) {
    group.push(li)
  }
  else {
    group.forEach(element => {
      element.classList.add('col-' + group.length)
    })
    group = []
  }
})

Answer 7

就像这样：

 var clmn = 1; /*Define global variable */
 $( "li" ).each(function( index ) {
      if ($(this).hasClass('colspan')) {
          $(this).addClass(clmn  +'-col');
      }
      if ($(this).hasClass('other')) {
          clmn =  parseInt(clmn) + 1 ;
      }
 });

Answer 8

我认为这应该可以解决问题：

var col = 0; // Col variable initial value

// Loop through all li elements
var el = jQuery("li").each(function(e) {

  var _this = jQuery(this);

  // If "other" class found then add col-# to all previous elements until reaching "other" class again
  if (_this.hasClass("other")) {

    _this.prevUntil(".other").addClass("col-" + col).text(_this.text() + " col-" + col);

    // reset col variable
    col = 0;
  }

  // Increase only if we have colspan li element
  if (_this.hasClass("colspan"))
    col++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="colspan">content - colspan</li>
  <li class="other">content</li>
  <li class="colspan">content - colspan</li>
  <li class="colspan">content - colspan</li>
  <li class="other">content</li>
  <li class="colspan">content - colspan</li>
  <li class="colspan">content - colspan</li>
  <li class="colspan">content - colspan</li>
  <li class="other">content</li>
  <li class="colspan">content - colspan</li>
  <li class="colspan">content - colspan</li>
  <li class="other">content</li>
  <li class="colspan">content - colspan</li>
  <li class="other">content</li>
</ul>