I have a div with multiple child.

<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

I want to check, in my main div (data-level="1") if exists a child with the attribute data-level with the value 3.

CodePudding user response：

I hope this answers will help you

From the following code snippet, you can able to each nested child divs from the main div[data-level="1"]

This code will check each child divs and give confirmation in the alert popup (If div has data-level attribute and value 3)

var mainDiv = $('div[data-level="1"]'); // get parent div
var getChildDiv = mainDiv.find('div'); // get all child divs

// check each child div one by one 
// i indicate the child div position in order, it's starting from 0
getChildDiv.each(function(i) {
    if ($(this).attr('data-level')=="3") {
        // give confirmation message if relavant child div ha data-level attribute , and it's value 3
        alert("Child div "   i  " has data-level attribute and it's value is 3");
    } else {
        // give message if div doesn not contain data-level attribute with value 3
        alert("Child div "   i  " is not matching div");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

From following code snippet, you can able to check all nested child divs form the main div[data-level="1"]

This code will check overall child divs counts and give confirmation in the alert popup (Total number of child div has data-level attribute and it's value 3)

var mainDiv = $('div[data-level="1"]'); // get parent element
var getChildDiv = mainDiv.find('div[data-level="3"]'); // get child div with data-level attribute and it's value 3
var numberOfChildDiv = getChildDiv.length; // get the total number of child elements div[data-level="3"]

if (numberOfChildDiv === 1) {
    // if only one matching child div display following message
    alert('Parent div has 1 child div with data-level attribute and it\'s attribute value is 3');
} else if(numberOfChildDiv > 1) {
    // if more thanone matching child divs display following message
    alert('Parent div has ' numberOfChildDiv ' child divs with data-level attribute and it\'s attribute value is 3');
} else {
   // no matching child divs display following message
   alert('No matching selection');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can build a condition based on your query... Something like this?

Snippet:

if (document.querySelectorAll('.SimpleList [data-level="3"]')[0]) {
  console.log('div data-level="3" exist');
}
else { 
  console.log('div data-level="3" NOT exist');
}

<div data-level="1" class="SimpleList" id="MyContainer">
    <div data-level="2">some text</div>
    <div data-level="2">
        <div>Simple div</div>
    </div>
    <div data-level="2">
        <div data-level="3">I want catch this level!</div>
    </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>