How assign differing attributes to multiple elements of the same class based on text value with JQuery

Question

So for example:

I have multiple <span> elements with the class of .listing-text that say Available, some that say Pending, and some that say Sold.

I'd like to assign a green background to the ones that say Available, yellow to Pending, and red to Sold.

I've tried a few different for loops and whatnot. All I've been able to make work so far is just turning every box green, and I assume that's because I'm not iterating properly. The only thing I can seem to get right is

$('.listing-text').css('background-color','green');

It reliably changes all backgrounds to green.

Any help would be appreciated.

Could you post the entire HTML chunk for the element of `.listing-text`? — tymeJV, Oct 29 '19 at 20:14
Can you apply classes of "available", "pending", and "sold" to your spans? — Scott Marcus, Oct 29 '19 at 20:22

score 1 · Accepted Answer · answered Oct 29 '19 at 20:27

See comments:

// Get all the listings and loop over them
document.querySelectorAll(".listing-text").forEach(function(listing){
  // Check the text of the span for the possible choices and
  // apply the appropriate CSS class
  switch (listing.textContent) {
    case "Available":
      listing.classList.add("available");
      break;
    case "Pending":
      listing.classList.add("pending");
      break;
    case "Sold":
      listing.classList.add("sold");
      break;       
  }
});

.available { background-color:green; }
.pending { background-color:yellow; }
.sold { background-color:red; }

<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>

score 0 · Answer 2 · answered Oct 29 '19 at 20:18

0

Looks like you can't write a css selector that matches on the text of the element (https://stackoverflow.com/a/1520469/8755370).

You could instead loop over the whole set of listings and add another class for each category. So all would have .listing-text but some would be .listing-available or .listing-pending. From there you can write your jquery functions like the one you posted.

answered Oct 29 '19 at 20:18

Quentin Fulsher

31
5

This is what ended up working. Thank you for the help. – FakeHelicopterPilot Oct 29 '19 at 21:28

score 0 · Answer 3 · answered Oct 29 '19 at 20:29

Try the following using jQuery's .each function.

$('.listing-text').each(function() {
    let listText = $(this).text()
    switch (listText) {
        case 'Pending':
            $(this).addClass('pending')
            break
        case 'Sold':
            $(this).addClass('sold')
            break
        case 'Available':
        default:
            $(this).addClass('available')
            break
    }
})

.available {  background-color: green  }
.pending {  background-color: yellow  }
.sold {  background-color: red  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="listing-text">Available</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Pending</span>

What I've done here is loop over each listing-text element, get the text, and apply a class based on its text value.

Wow, awesome solution. Different direction than I was thinking in, but completely solved my problem. Thanks for taking the time to help, Andrew. — FakeHelicopterPilot, Oct 29 '19 at 21:28

How assign differing attributes to multiple elements of the same class based on text value with JQuery

3 Answers3