Question

I have two divs, <div class="number"></div> and <div class="label"></div>.

I would like to devise an if/else statement, so that if the value in “number” is 1, it returns a label of, for example, “User”, whereas if the number is 2 or higher, it changes to “Users”.

Is there a way to check the value of .number and then return the label based on it?

Also, there will be 5 instances of “number” and “label” on the same page. Each number will be returned by querying its value from a database (WordPress Custom Field Meta).

Also, the label will be different for each instance, the first might be “Users” whereas the second could be “Products”, etc.

How would I do what I need?

Here is an example of my code:

<div class="data-item employees">
     <div class="number"><?php echo $sc_data_employees; ?></div>
     <div class="label"></div>
</div>
<div class="data-item products">
     <div class="number"><?php echo $sc_data_products; ?></div>
     <div class="label"></div>
</div>

Answer 1

Try:

$('.number').each(function(){
    $(this).next('.label').html( ($(this).text()==1)?'user':'users');
});​​​​​​​​

This will run through all elements of class number and change the next instance of element label. Depending on how your divs are arranged, you may need to change .next() to another function.

jsFiddle example.

Update: Based on your revisions, try this:

$('.number').each(function(){
    var plural = $(this).parent().attr('class').split(' ')[1];
    var singular = plural.substring(0, plural.length - 1);
    $(this).next('.label').html( ($(this).text()==1)?singular:plural);
});​

jsFiddle example.