Question

我正在尝试计算项目列表的数量，并将这些数字作为每个项目的标签。但它需要在计数时跳过一些特定数字。例如，

固定的10个项目列表将跳过数字3、6、8、9和13。然后将继续计数。结果应如下所示。

列表：1
列表：2
列表：4
列表：5
列表：7
列表：10
列表：11
列表：12
列表：14
列表：15

请注意，我不能使用.append()函数，因为出于某种原因，HTML列表结构是固定的，不应进行修改（隐藏，删除，附加等）。只需在每个项目中使用<span>标记数字值。

jQuery('ul li').each(function(j){
 var j = j+1;
 if (j == 6) {
  return;
 }
 jQuery(this).find('span').html(j);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
</ul>

Answer 1

根据评论，我认为这段代码将满足您的要求：

$( document ).ready(function() {
   var nums = [1, 2, 4, 5, 7,10,11,12,14,15];
   $('ul li').each(function(index){
   console.log(index);
      $(this).find('span').html(nums[index]);
   });
 });

提琴手演示https://jsfiddle.net/Arif2009/qwczf634/11/

Answer 2

您可以创建一个不想包含的数字数组。然后使用jquery inArray函数确定它是否在数组中。如果它在数组中，请跳过它。

$( document ).ready(function() {
   var count = 1;
   var nums = [3, 6, 8, 9, 13];
   $('ul li').each(function(){
      if($.inArray(count, nums) === -1){
         $(this).find('span').html(count);
       } else {
         $(this).hide();
       }   
       count++;
   });
 });

提琴手输出https://jsfiddle.net/Arif2009/qwczf634/

Answer 3

您可以在JS中使用数组和array.prototype.includes（）来检查“不使用”列表中是否包括该数量的列表项。在jQuery中，您可以使用.inArray（）实现相同的功能。

这是jQuery：

$(function() {
  skipCount([3, 6, 8, 9, 13], 'span');
});

function skipCount(doNotUse, identifier) {
  var counter = 1;
  var list = $(identifier);
  for (i=0;i<list.length;i++) {
    if ($.inArray(counter, doNotUse)===-1) {
      $(list[i]).text(counter);
      counter++;
    } else {
      counter++;
      i--;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
 <li> List: <span></span> </li>
</ul>

以上，您可以将任何“请勿使用”数组和标识符传递给该函数。

使用jQuery .text()而不是.html()，将允许您仅更改span元素内的文本，而不更改页面的HTML。

这是基本的JS版本，以防将来有人想要：

function skipCount(doNotUse, list) {
  var counter = 1;
  for (i=0;i<list.length;i++) {
    if (!doNotUse.includes(counter)) {
      list[i].innerHTML = counter;
      counter++;
    } else {
      counter++;
      i--;
    }
  }
}

function init() {
  elems = document.getElementsByTagName('span');
  skipCount([3, 6, 8, 9, 13], elems);
}

window.onload = init;

循环浏览项目列表（跳过并继续计数）

3 个答案: