Question

有没有办法计算连续出现的项目（串联而不中断）？让我们说我们有

<span><div class="amount large">100</div></span>
<span><div class="amount large">120</div></span>
<span><div class="amount large">300</div></span>
<span><div class="amount small">90</div></span>
<span><div class="amount large">110</div></span>
<span><div class="amount large">520</div></span>
... List continues

我把它们分成了

function isBigEnough(element, index, array) {
  return element >= 100;
}

function isNotBigEnough(element, index, array) {
  return element <= 99;
}

var values = [];

$(".amount").slice(0, 5).each(function(index){
    values.push($(this).text());
});

if (values.every(isBigEnough)) {
    console.log("Large");
} else if (values.every(isNotBigEnough)) {
    console.log("Small");
} else {console.log("No Series")}

如何计算一行中出现的元素数量，在我的情况下为3。

我试过

 $("span .large ~ span .large").length

但我知道有错误（或根本不对）。

Answer 1

不，那就是你似乎错了:)，要求是找到串联的元素数量（相邻的兄弟姐妹），

在问题的html处，没有.large元素与.large元素的兄弟姐妹相邻;因为所有.large元素都是span元素的后代。请参阅Adjacent sibling selectors。

您可以使用:has()选择器span:has(.large) + span:has(.large)返回与包含span元素的.large兄弟姐妹相邻的元素。请注意，这应返回第一个span:has(.large)的{{1}}，不包括第一个span:has(.large)。虽然可以通过确定span:has(.large)元素的总.length来得出准确的.length，但要么添加一个，要么进行乘法和除法。

span:has(.large)

var adjacentLarge = $("span:has(.large) + span:has(.large)");

console.log(
  adjacentLarge.length, // this should return 3; .large having text 120, 300, 520
  $("span:has(.large)").length 
  * (adjacentLarge.length / adjacentLarge.length) // 5
);

您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <span><div class="amount large">100</div></span> <span><div class="amount large">120</div></span> <span><div class="amount large">300</div></span> <span><div class="amount small">90</div></span> <span><div class="amount large">110</div></span> <span><div class="amount large">520</div></span>，.filter()，.prev()，.is()，.nextUntil()，.nextAll()，.add()

.next()

var adjacentLarge = $("span:has(.large):first").filter(function() {
  return !$(this).prev().is(":has(.large)")
});

var firstLargeSet = adjacentLarge.nextUntil(":not(:has(.large))")
                    .add("span:has(.large):first");

var secondLargeSet = firstLargeSet.filter(":eq(-1)")
                     .nextAll(":has(.large)")
                     .filter(function() {
                       return $(this).next().is(":has(.large)") 
                              || $(this).prev().is(":has(.large)")
                     });

function isBigEnough(element, index, array) {
  return element >= 100;
}

function isNotBigEnough(element, index, array) {
  return element <= 99;
}

var values1 = [];

firstLargeSet.each(function(index) {
  console.log(this.textContent); // 100, 120, 300
  values1.push($(this).text());
});

if (values1.every(isBigEnough)) {
  console.log("Large"); // Large
} else if (values1.every(isNotBigEnough)) {
  console.log("Small");
} else {
  console.log("No Series")
}

var values2 = [];

secondLargeSet.each(function(index) {
  console.log(this.textContent); // 110, 520
  values2.push($(this).text());
});

if (values2.every(isBigEnough)) {
  console.log("Large"); // Large
} else if (values2.every(isNotBigEnough)) {
  console.log("Small");
} else {
  console.log("No Series")
}

var adjacentLarge = $("span:has(.large):first").filter(function() {
  return !$(this).prev().is(":has(.large)")
});

var firstLargeSet = adjacentLarge.nextUntil(":not(:has(.large))")
                    .add("span:has(.large):first");

var secondLargeSet = firstLargeSet.filter(":eq(-1)")
                     .nextAll(":has(.large)")
                     .filter(function() {
                       return $(this).next().is(":has(.large)") 
                              || $(this).prev().is(":has(.large)")
                     });

function isBigEnough(element, index, array) {
  return element >= 100;
}

function isNotBigEnough(element, index, array) {
  return element <= 99;
}

var values1 = [];

firstLargeSet.each(function(index) {
  console.log(this.textContent); // 100, 120, 300
  values1.push($(this).text());
});

if (values1.every(isBigEnough)) {
  console.log("Large"); // Large
} else if (values1.every(isNotBigEnough)) {
  console.log("Small");
} else {
  console.log("No Series")
}

var values2 = [];

secondLargeSet.each(function(index) {
  console.log(this.textContent); // 110, 520
  values2.push($(this).text());
});

if (values2.every(isBigEnough)) {
  console.log("Large"); // Large
} else if (values2.every(isNotBigEnough)) {
  console.log("Small");
} else {
  console.log("No Series")
}

Answer 2

浏览元素并比较连续两个是否相等;如果是的话，增加一个计数器。如果没有，则创建一个新计数器。最后一步是所有计数器的最大值。

请注意，这对结构一无所知，也不执行任何结构。它将获得具有amount类的所有元素。因此，如果要将结果范围缩小到DOM的更具体部分，则可以在第一行修改选择器。

$.makeArray($(".amount"))
  .reduce(function(pVal,cVal,i,array) {
      if (i > 0 && ((array[i-1].classList.contains("large") && array[i].classList.contains("large"))
          || (array[i-1].classList.contains("small") && array[i].classList.contains("small"))))
        pVal[pVal.length-1]++;
      else 
        pVal.push(1);
      return pVal;
   }, [] )
  .reduce( (a,b) => a > b ? a : b , 0 )

计算串联发生的项目

2 个答案: