jQuery：如果 XYZ，将 class 添加到此 AND 下一个元素

Question

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

我需要找到 class 为 .colspan 的列表项，看看它后面的项目是否也有 class，然后添加 class取决于有多少人关注它。

如果只有 1 个，给那个 li 另一个 class 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

一种可能性是有一个递归函数，用 colspan class 计算下一个元素的数量。遍历所有 colspan，检查 .prev 元素是否为 colspan。如果是，则将 class 名称设置为前一个元素的 -col class，否则使用当前 colspan 调用递归函数（这将是第一个在任何 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());

<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 2

这是您的要求的演示。我所做的是创建一个全局变量，然后检查 class colspan 并动态添加 class

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 3

给你。

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 4

如果您的 colspan LI 中有任何分隔符，例如 other class 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 5

首先，有效的 CSS class 名称不能以数字开头。因此我将使用后缀，即 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)
  })
})

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

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 6

这可行（使用 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个数的限制，不使用例子class "other"来匹配。（它匹配如果它没有 colspan 作为 class）。

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>

jQuery：如果 XYZ，将 class 添加到此 AND 下一个元素

jQuery: if XYZ, add class to this AND next element

jquery

next