jQuery：如果 XYZ，将类添加到这个和下一个元素

问题描述 投票：0回答：8

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

我需要找到类别为

.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
这被证明是一个挑战。

任何帮助将不胜感激！

jquery jquery-selectors
8个回答
3
投票

这会起作用（使用 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 作为一个类，它就会匹配）。

2
投票

一种可能性是有一个递归函数来计算 

colspan
类的下一个元素的数量。遍历所有
colspan
，检查
.prev
元素是否为
colspan
。如果是，则将类名设置为前一个元素的 
-col
类，否则使用当前 
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>

1
投票

这是您要求的演示。我所做的是创建一个全局变量，然后检查类

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>

0
投票

给你。

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>

0
投票

如果您的 

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++;
 }    
});
0
投票

就像这样：

 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 ;
      }
 });
0
投票

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

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>

0
投票

首先，一个有效的 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 = []
  }
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.