Question 36237 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

addClass when a number inside a span is greater than 0 – Jquery

I want to add class "active" to "fav-contractors" container only when number inside "fav-con-count" span is greater than 0.

This is HTML code

<span class="fav-contractors">
    <span class="fav-con-count">7</span>
</span>

and this is jQuery code

function favCounter() {
    if ($(".fav-con-count").textContent > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();

Which "if" rule should I use? I also tried something like that but it didn’t work:

function favCounter() {
    var favValue = $(".fav-con-count").textContent;

    if (+favValue > 0)) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();
Tags:

2

Answers


  1. 0

    You should use .text() instead of textContent

    function favCounter() {
    if ($(".fav-con-count").text() > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();
    .active {
  background: yellow;
}
    <span class="fav-contractors">
    <span class="fav-con-count">7</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

    This is an example of the number 0 not adding the active class

    function favCounter() {
    if ($(".fav-con-count").text() > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();
    .active {
  background: yellow;
}
    <span class="fav-contractors">
    <span class="fav-con-count">0</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    Login or Signup to reply.
  2. 0

    Node.textContent is JavaScript, not part of the jQuery library per-se. jQuery uses the .text() method to get the text by using textContent under the hood. Also, read about jQuery’s toggleClass() method, you can use a second boolean parameter instead, making the if statement unnecessary.

    Since you use classes it’s pretty dangerous to just do $(".fav-contractors").addClass("active");, since you could:

    • have many .fav-contractors Elements in a single page and all will get the active class
    • $(".fav-con-count").text() > 0 means that only if the first of that class Element has text greater than 0 – which might also be incorrect and lead to a buggy undesired behavior.

    Solution

    • Use .each() to iterate all your elements of a specific class
    • Use .closest() to traverse to a specific element ancestor (or self)
    • (As already mentioned) use toggleClass()
    $(".fav-con-count").each(function() {
  $(this).closest(".fav-contractors").toggleClass("active", $(this).text() > 0);
});
    .fav-contractors { padding: 1rem; }
.active { background: gold; }
    <span class="fav-contractors">
  <span class="fav-con-count">7</span>
</span>

<span class="fav-contractors">
  <span class="fav-con-count">0</span>
</span>

<span class="fav-contractors">
  <span class="fav-con-count">3</span>
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search