Как найти определенный Div, используя jQuery

Question

Пожалуйста, объясните мне, как я могу найти определенный div, используя jQuery для следования 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>

Я хочу проверить, содержит ли первый div с классом 'tab_content' div с id = 'GoogleMap_Canvas' или нет - что должно быть ложным для вышеупомянутого html, как во втором div.

Я пытался использовать -

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

который, кажется, работает нормально для меня.

Однако я запутался, почему следующий jQuery возвращает ноль?

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

Спасибо!

Answer 1

Поскольку вы проверяете уникальный идентификатор, это не должно быть настолько сложным.

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

Я полагаю, что вы получаете ноль, потому что вы вызываете.children для объекта, не являющегося jquery. Попробуй это:

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

или лучше:

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

Answer 2

Вы можете попробовать использовать селектор has в jQuery, чтобы получить div 'tab_content', который содержит div 'GoogleMap_Canvas':

var googleDivContainer = $(".tab_content").has('#GoogleMap_Canvas');

Answer 3

"Я хочу проверить, содержит ли первый div с классом tab_content div с id = 'GoogleMap_Canvas' или нет"

использовать этот:

if ($(".tab_container").children('.tab_content:first').children('#GoogleMap_Canvas').length > 0){
// do something
}

Answer 4

Это возвращает NULL

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

потому что $(".tab_content")[1] возвращает элемент DOM, у которого нет дочернего метода.

Добавьте дополнительный "$" для приведения результата к объекту jQuery

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

Answer 5

Ваша последняя строка возвращается null так как $(".tab_content")[1] возвращает элемент DOM, а не объект jQuery, а элементы DOM не предоставляют children() метод.

Обратите внимание, что eq() возвращает объект jQuery, поэтому будет работать следующий код:

var children = $(".tab_content").eq(1).children('#GoogleMap_Canvas');

Answer 6

Попробуй это:

var length = $(".tab_content[id*='GoogleMap_Canvas']").length;