alimarwan alimarwan - 3 months ago 10
CSS Question

jQuery: How to .show() an element with class that contains specific text?

Update:
I have updated the question with the code I am using, for example based on (select) element if (option)paint(/option) selected I want to show or hide the whole "working class" div .working or if (option) Body Shop (/option) selected I want to show the whole "non-productive class" div .non-productive

I have multiple HTML elements with similar divs structure but different class names however some of these

divs
do share certain text, how can I use
.show()
to show those divs using their
.class
name which contains that certain shared text?

$('#qualifications').change(function(){
if($('#qualifications').val() == 'Paint'){
$('div:contains("Paint")').show();
}
})
});


this is bad example cause I want to target the element using
class name
instead of
('div:contains('Paint')')


here's the code:

<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>

<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>

<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>

Answer

Try this :

$(document).ready(function(){

    $("#qualifications").on("change",function(){

        if($(this).val() == 'Paint') 

            $("div.working:contains(Paint)").show();

    })

})

I in below example use red border instead of show , because To show you what selected if you select paint of select box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
     <select id='qualifications'>
                    <option>All</option>
                    <option>Body Shop</option>
                    <option>Electrician</option>
                    <option>Mech</option>
                    <option>Paint</option>
    </select>

                    <!-- Working Class -->
                    <div class="working">
                        <div class="working-indicator">
                            <p>W</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Dennis Bokenkamp </h6>
                                <p><b><i>Paint</b></i></p>
                                <p>FIA</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>10:09:00 AM</p>
                            </div>
                        </div>
                    </div>

                    <!-- Non-Productive Class -->
                    <div class="non-productive">
                        <div class="non-productive-indicator">
                            <p>N</p>
                            <div class="user-circle">
                                <img src="imgs/usericon.png">
                            </div>
                            <div class='user-info'>
                                <h6> Rick Richard </h6>
                                <p><b><i>Bodyshop 200%</b></i></p>
                                <p>DNF</p>
                            </div>
                            <div class='user-clocking'>
                                <img src="imgs/clockicon.png">
                                <p>10/8/2016</p>
                                <p>11:09:00 AM</p>
                            </div>
                        </div>
                    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(document).ready(function(){
    
    $("#qualifications").on("change",function(){
        
        if($(this).val() == 'Paint') 
            
            $("div.working:contains(Paint)").css({border:"2px solid red"});
               
    })
    
})
       
    </script>
    </body>
</html>