CODEWITHSUNDEEP
javascriptjquery
relo80
relo80

Reputation: 285

How can I check a element by class name which has some classes

I need to check if there is a element which has some class names or not

Example

<div id="text1" class="myclass searchA searchB searchC">...</div>
<div id="text2" class="myclass searchB searchA searchC">...</div>
<div id="text3" class="myclass searchD searchB searchA">...</div>
<div id="text3" class="myclass searchX searchY searchZ">...</div>

I tried to do it with this, but it wont work

var lookfor =".searchA.searchB";
console.log('id from div how matched the loorfor classes:'+$(".myclass").is(lookfor).attr('id'));

I also tried this

console.log('id from div how matched the loorfor classes:'+$(".myclass").hasClass(lookfor).attr('id'));

Additional notes: the order of the classes that I'm looking for can be different each time. Also it's important to check if all classes in the element are only one.

What am I doing wrong?

Update

Is it possible to limit the search for a div? Example

<div id="firstdiv">
 <div id="text1_first" class="myclass searchA searchB searchC">...</div>
    <div id="text2_first" class="myclass searchB searchA searchC">...</div>
    <div id="text3_first" class="myclass searchD searchB searchA">...</div>
    <div id="text3_first" class="myclass searchX searchY searchZ">...</div>
</div>
<div id="scnddiv">
 <div id="text1_scnd" class="myclass searchA searchB searchC">...</div>
    <div id="text2_scnd" class="myclass searchB searchA searchC">...</div>
    <div id="text3_scnd" class="myclass searchD searchB searchA">...</div>
    <div id="text3_scnd" class="myclass searchX searchY searchZ">...</div>
</div>

Now I want only the classes inside the scnd div that matched my lookfor.

Upvotes: 1

Views: 40

Answers (1)

Dominik
Dominik

Reputation: 6313

Instead of using a filter, just use the selector directly:

const id = $(".myclass.searchA.searchB").attr('id');
console.log('id from div which matched the classes: ' + id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="text1" class="myclass searchA searchB searchC">...</div>
<div id="text2" class="myclass searchB searchA searchC">...</div>
<div id="text3" class="myclass searchD searchB searchA">...</div>
<div id="text3" class="myclass searchX searchY searchZ">...</div>

Update

To the update of your question:

const id1 = $("#firstdiv .myclass.searchA.searchB").attr('id');
console.log('ID from the firstdiv that matched the classes: ' + id1);

const id2 = $("#scnddiv .myclass.searchA.searchB").attr('id');
console.log('ID from scnddiv that matched the classes: ' + id2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstdiv">
    <div id="text1_first" class="myclass searchA searchB searchC">...</div>
    <div id="text2_first" class="myclass searchB searchA searchC">...</div>
    <div id="text3_first" class="myclass searchD searchB searchA">...</div>
    <div id="text3_first" class="myclass searchX searchY searchZ">...</div>
</div>

<div id="scnddiv">
    <div id="text1_scnd" class="myclass searchA searchB searchC">...</div>
    <div id="text2_scnd" class="myclass searchB searchA searchC">...</div>
    <div id="text3_scnd" class="myclass searchD searchB searchA">...</div>
    <div id="text3_scnd" class="myclass searchX searchY searchZ">...</div>
</div>

Upvotes: 1

Related Questions