CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Smith
Daniel Smith

Reputation: 1734

Check more than one class

I try to get text those item which having a particular class or no class or have not two class.

Here is my html code -

<div id="events">
    <ul class="checkout-bar">
        <li class=""><span><a href="#">Order</a></span></li>
        <li class=""><span><a href="#">Booking</a></span></li>
        <li class="t-completed"><span><a href="#">Receiving</a></span></li>
        <li class="t-completed"><span><a href="#">Loading</a></span></li>
        <li class="t-completed active"><span><a href="#">Arrival</a></span></li>
        <li class="inactive"><span><a href="#">Arrival</a></span></li>
        <li class="inactive"><span><a href="#">Availability</a></span></li>
        <li class="inactive"><span><a href="#">Delivery</a></span></li>
    </ul>
</div>

Now, I want to get Text of those link tag () which li having 't-completed' class and which having empty class and which have not 't-completed' and 'active' class i.e <li class="t-completed active">

Try with Jquery - 

if($('#events .checkout-bar li').length>0){
    $('#events .checkout-bar li').each(function(){  
        var t = $(this);
        if (!t.hasClass() || (t.hasClass("ms-completed") && !t.hasClass("active"))){

        //if($(this).is('.ms-completed:not(.active)') || $(this).attr('class')==""){
            var oldtxt = $(t).find('span a').text();
            if(oldtxt == 'Order'){
                t.find('span a').text("Ordered");
            }else if(oldtxt == 'Booking'){
                t.find('span a').text("Booked");
            }else if(oldtxt == 'Receiving'){
                t.find('span a').text("Received");
            }else if(oldtxt == 'Loading'){
                t.find('span a').text("Loaded");
            }else if(oldtxt == 'Arrival'){
                t.find('span a').text("Arrived");
            }else if(oldtxt == 'Availability'){
                t.find('span a').text("Available");
            }else if(oldtxt == 'Delivery'){
                t.find('span a').text("Delivered");
            }else if(oldtxt == 'In transit'){
                t.find('span a').text("Transited");
            }else{
                t.find('span a').text(oldtxt);
            }
        }
    });
}

Replace those <a> tag text which <li> having empty ("") class and which having "ms-completed" class only. Currently, replace those <a> tag text which <li> having "ms-completed active' class.

Suggestions?

Upvotes: 0

Views: 73

Answers (1)

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

You can try hasClass() here:

var t = $(this);
if (t.attr("class") === '' || (t.hasClass("t-completed") && !t.hasClass("active"))) {....}

UPDATE: I don't know if you have this line in your actual code:

var oldtxt = $(t).find('span a').text();

but t already equals $(this) so don't wrap t again in $().

Also, this should be sufficient for oldtxt (based on your shown HTML above):

var oldtxt = t.text();

Upvotes: 2

Related Questions