how to show tags with text greater than 0-CodePudding

how to select all span tags starting from 3-th span and only with numbers greater than 0 and toggleClass of li to block?

<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>0</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>4</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>3</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>0</span>
</li>

CodePudding user response：

I'd use classes on the items instead of inline styling then just pick up the spans, slice from the 3rd node, and then remove the hidden class from its parent.

const spans = document.querySelectorAll('span');

[...spans].slice(2).forEach(span => {
  if (span.textContent > 0) {
    const item = span.parentElement;
    item.classList.remove('hidden');
  }
});

.hidden { display: none; }

<ul>
  <li ><span>1</span></li> 
  <li ><span>0</span></li>
  <li ><span>1</span></li> 
  <li ><span>4</span></li>
  <li ><span>1</span></li>
  <li ><span>3</span></li>
  <li ><span>1</span></li> 
  <li ><span>0</span></li>
</ul>

CodePudding user response：

The problem with your question is that there a LOT of potential answers. Consider the following.

My examples will use Classes, hidden and shown, which is considered better practice than embedded style attribute. Yet if you must, you can do it via .css():

$("li:gt(2) span:not(:contains('0'))").parent().css("display", "block");

Example 1

$(function() {
  $("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
});

.hidden {
  display: none;
}

.shown: {
  display: block;
}

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

You could also do this with .each() or even .map().

Example 2

$(function() {
  $("li:gt(2)").each(function(i, el) {
    var cnt = $(el).text().trim();
    if (parseInt(cnt) > 0) {
      $(el).toggleClass("hidden shown");
    }
  })
});

.hidden {
  display: none;
}

.shown: {
  display: block;
}

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

See More:

CodePudding user response：

// starting from 3-th span and only with numbers greater than 0
let spans = document.querySelectorAll('span');
// take 
spans = [...spans].slice(2).filter(span => {
  const condition =  span.innerText > 0
  condition && (span.parentNode.style.display = 'block')
  return condition
  })

<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>0</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>4</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>3</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
 <span>0</span>
</li>