Как найти определенный 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

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

используйте это:

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

Answer 2

Возвращается NULL

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

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

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

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

Answer 3

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

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

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

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

или лучше:

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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