Question

Please guide me how can I find a particular div using jQuery for following html –

       <div class="tab_container">
            <div id="tabs-1111" class="tab_content" style="display: block;">
                <p>26 High Street, Slough, SL1 1EP</p>
                <p></p>
            </div>
            <div id="tabs-1110" class="tab_content" style="display: none;">
                <p></p>
                <p></p>
                <div id="GoogleMap_Canvas" 
                    style="width: 410px; height: 450px; position: relative; overflow: hidden;">
                    <p></p>
                </div>
            </div>    
        </div>

I want to check if first div with ‘tab_content’ class contains div with id = ‘GoogleMap_Canvas’ or not – which should come out to be false for above html as it is in second div.

I tried using –

if ($(".tab_content:first").children('#GoogleMap_Canvas').length > 0)
or
if ($(".tab_content:nth-child(1)").children('#GoogleMap_Canvas').length> 0)

which seems to be working fine for me.

However, I am confused why following jQuery returns null?

($(".tab_content")[1]).children('#GoogleMap_Canvas') //returns null

Thank you!

Answer 1

Since you are checking for a unique id, this doesn’t need to be that complicated.

if ($('#GoogleMap_Canvas').length > 0)
  //map div exists

I believe you are getting a null because you are calling .children on a non-jquery object. Try this:

$($(".tab_content")[1]).children('#GoogleMap_Canvas')

or better:

$(".tab_content:eq(1)").children('#GoogleMap_Canvas')