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

ulydmbyx 于 2023-05-17 发布在 jQuery

关注(0)|答案(8)|浏览(116)

我有一个无序列表，其中包含未知数量的列表项，顺序未知。
我需要找到类为.colspan的列表项，看看它后面的项是否也有这个类，然后根据后面的类添加一个类。
如果只有1，则给予li另一个类1-col。
如果有两个在一排，2-col。
如果有三个在一排，3-col。
我一次不需要超过三个。
例如...
之前：

<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

来源：https://stackoverflow.com/questions/51758766/jquery-if-xyz-add-class-to-this-and-next-element

8条答案

按热度按时间

kx5bkwkv1#

这将工作（使用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类，则匹配）。

赞(0）回复(0）举报 2023-05-17

6fe3ivhb2#

一种可能性是使用一个递归函数来计算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>

赞(0）回复(0）举报 2023-05-17

fnvucqvd3#

下面是一个演示您的要求。我所做的是创建一个全局变量，然后检查类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）回复(0）举报 2023-05-17

qnzebej04#

给你

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）回复(0）举报 2023-05-17

ubbxdtey5#

如果你的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）回复(0）举报 2023-05-17

kpbpu0086#

就像这样：

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）回复(0）举报 2023-05-17

qqrboqgw7#

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

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）回复(0）举报 2023-05-17

gcmastyq8#

首先，有效的CSS类名不能以number开头。所以我会用后缀。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 = []
  }
})

赞(0）回复(0）举报 2023-05-17

我来回答

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

8条答案

相关问题

热门标签

最新问答