代码之家  ›  专栏  ›  技术社区  ›  Amir

如何使用jquery检测文本以特殊单词开头的元素数?

  •  0
  • Amir  · 技术社区  · 7 年前

    <section id="sec">
       <div id="item1">item1</div>
       <div id="item2">item2</div>
       <div id="item3">item3</div>
       <div id="abcitem1">abcitem1</div>
    </section>
    

    我想检查contextText以多少个div标记开头 item . 我可以知道有没有更简单的方法为条件编写代码并逐个计算它们(比如Jquery)?

    5 回复  |  直到 7 年前
        1
  •  4
  •   Mohammad DefenestrationDay    7 年前

    使用 .filter() 筛选选定元素并在中使用regex .match() item 在元素文本中。

    var count = $("#sec div").filter(function(){
      return $(this).text().match(/^item/);
    }).length;
    console.log(count);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section id="sec">
       <div id="item1">item1</div>
       <div id="item2">item2</div>
       <div id="item3">item3</div>
       <div id="abcitem1">abcitem1</div>
    </section>
        2
  •  3
  •   Esar-ul-haq Qasmi    7 年前
    var res=0;
    $( "#sec div" ).each(function( index ) {
     var str=  $(this).text() ;
      if(str.startsWith("item")==true){
      res++;
      }
    
    });
    
    console.log(res); //returns 3
    
        3
  •  2
  •   gr4viton    7 年前

    你可以用 reduce 函数获取以 'item' .

    这是一个本机javascript解决方案,使用 startsWith

    var childDivs = document.getElementById('sec')
               .getElementsByTagName('div');
    
    var counter = Array.from(childDivs)
      .reduce((accumulator, currentValue) => {
        if (currentValue.innerHTML.startsWith('item')) {
          return accumulator = accumulator + 1;    
        }
        return accumulator;
    }, 0);
    
    console.log( counter );
    <section id="sec">
       <div id="item1">item1</div>
       <div id="item2">item2</div>
       <div id="item3">item3</div>
       <div id="abcitem1">abcitem1</div>
    </section>
        4
  •  2
  •   Endless TheZver    7 年前

    没有任何jQuery或regex

    var nodes = document.querySelectorAll('#sec div')
    var count = 0
    nodes.forEach(node => count += node.innerText.startsWith('item'))
    console.log(count)
    <section id="sec">
       <div id="item1">item1</div>
       <div id="item2">item2</div>
       <div id="item3">item3</div>
       <div id="abcitem1">abcitem1</div>
    </section>

    可以给一个数字加上布尔值, true false 表示0

        5
  •  1
  •   0xdw thommie    7 年前

    这里有一个简单的方法来计算它。

    function checkItemsCount(section) {
      if (!section) return 0;
      const sec = document.querySelector(section);
      const items = sec.querySelectorAll('div');
      let count = 0;
      for (let i = 0; i < items.length; i++) {
        if (/^item/.test(items[i].innerText)) count++;
      }
      return count;
    }
    
    console.log(checkItemsCount('#sec'));
    <section id="sec">
      <div id="item1">item1</div>
      <div id="item2">item2</div>
      <div id="item3">item3</div>
      <div id="abcitem1">abcitem1</div>
    </section>