Question

我在向列表视图元素添加一个CSS类时面临一些问题。这个列表视图元素有一些子元素，我想添加一个类。喜欢

<li class="cmsCLI" data-type="first">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString **firstActive**">C</div>
  <div class="cmsString">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString">F</div>
</li>
<li class="cmsCLI" data-type="middle">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString">C</div>
  <div class="cmsString">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString">F</div>
</li>
<li class="cmsCLI" data-type="last">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString">C</div>
  <div class="cmsString">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString **lastActive**">F</div>
</li>

根据上面的ListView，我想添加一个类＆＃34; active＆＃34;介于 firstActive 到 lastActive 类之间。我确实喜欢以下步骤。

首先，我检索第一个active和lastActive类

var firstWrapper = window.jQuery('.cmsCLI').find('.cmsString[data-type="start"]');
var lastWrapper = window.jQuery('.cmsCLI').find('.cmsString[data-type="last"]'); 
var firstActive = window.jQuery(firstWrapper).find('.cmsCLI .firstActive'); 
var lastActive = window.jQuery(lastWrapper).find('.cmsCLI .lastActive');

然后我检查firstActive.length值并添加＆＃34;有效＆＃34;类

if (firstActive.length > 0) {
  firstActive.nextUntil(lastActive ).addClass('active');
} else {
  var first = window.jQuery(lastActive).siblings('.cmsString:first'); 
  first.addClass('active');
  first.nextUntil(lastActive).addClass('active');
}

这是添加＆＃39;有效＆＃39;只有ListView[data-type="first"]来自＆＃34; A＆＃34;到＆＃34; F＆＃34;和来自＆＃34; A＆＃34;的ListView[data-type="last"]到＆＃34; F＆＃34;。不幸的是，中间的ListView[data-type="middle"]没有添加任何“有效”的活动。 CALSS。

我的查询是如何激活中间Listview元素？感谢您宝贵的时间和精力

Answer 1

如果我有了你的想法，我想你想用classname cmsString为所有div标签添加活动类。

此查询将为每个.cmsString表单添加活动firstActive到lastActive

var element = $('.cmsString');
var length = element.length; //length of element
var start = 0; // find index of firstActive
for(var i = 0; i< length; i++){
    if(element.eq(i).hasClass('firstActive')){
        start = i;
    }
}

for(var x = start; x<length; x++){
    element.eq(x).addClass('active');
}

Answer 2

您可以简单地使用以下逻辑!!!

$(document).ready(function() {
  var flag = false;
  $(".cmsString").each(function(index, value) {
    if (!flag && $(value).hasClass('firstActive')) {
      flag = true;
      $(value).addClass('active');
    } else if (flag) {
      $(value).addClass('active');
      if ($(value).hasClass('lastActive'))
        flag = false;
    }
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="cmsCLI" data-type="first">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString firstActive">C</div>
  <div class="cmsString">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString">F</div>
</li>
<li class="cmsCLI" data-type="middle">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString">C</div>
  <div class="cmsString">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString">F</div>
</li>
<li class="cmsCLI" data-type="last">
  <div class="cmsString">A</div>
  <div class="cmsString">B</div>
  <div class="cmsString">C</div>
  <div class="cmsString lastActive">D</div>
  <div class="cmsString">E</div>
  <div class="cmsString">F</div>
</li>

如何从Jquery中的列表视图中选择中间子元素？

2 个答案: