Использование jQuery, чтобы узнать, есть ли у div дочерний элемент с определенным классом

115

У меня есть div, #popupкоторый динамически заполняется несколькими абзацами с классом .filled-text. Я пытаюсь заставить jQuery сказать мне, #popupесть ли в нем один из этих абзацев.

У меня есть такой код:

$("#text-field").keydown(function(event) {
    if($('#popup').has('p.filled-text')) {
        console.log("Found");
     }
});

Какие-либо предложения?

javascript jquery

— Samsquanch
источник

1

Вы ищете только ребенка или любого потомка (ребенка, внука, правнука и т. Д.). В настоящее время в заголовке вопроса написано «ребенок», но ответы, похоже, говорят о произвольных потомках.

— hippietrail

В то время я думаю, что специально искал ребенка, но это трудно вспомнить наверняка, так как этому вопросу почти 4 года. В любом случае, вопросы и ответы охватывают как детей, так и потомков, и есть также ответы, которые касаются конкретно детей, а не потомков, поэтому я не уверен, что вы пытаетесь понять.

— Samsquanch

О, просто при использовании поисковой системы для поиска вопроса конкретно о поиске элемента с дочерним элементом, соответствующим селектору, это тот, который он находит, поэтому я бы изменил заголовок вопроса, если бы он был неточным, чтобы помочь другим людям найти правильный вопрос в будущем.

— hippietrail

198

Вы можете использовать функцию поиска :

if($('#popup').find('p.filled-text').length !== 0)
   // Do Stuff

— Tejs
источник

7

Это действительно сработало так, как мне нужно, но для справки if($('#popup').has('p.filled-text').length != 0) {тоже работает.

— Samsquanch

9

Нет необходимости проверять 0. 0 в js - это ложь. developer.mozilla.org/en-US/docs/Glossary/Falsy

— РАВИ

37

Есть функция hasClass

if($('#popup p').hasClass('filled-text'))

— MattP
источник

7

Используйте детскую функцию jQuery.

$("#text-field").keydown(function(event) {
    if($('#popup').children('p.filled-text').length > 0) {
        console.log("Found");
     }
});

$.children('').length вернет количество дочерних элементов, соответствующих селектору.

— Кристофер Рамирес
источник

1

.size()возвращает то же, что и .lengthсвойство, но медленнее, поэтому вам следует заменить это.

— Йоханнес Клаус

Спасибо, Джоннес, что указал мне на это! Я этого не знал. Answare обновлен!

— Кристофер Рамирес

Пожалуйста, но ошибка все равно есть. Это .lengthне так.length()

— Йоханнес Клаус

: PI думал, что это функция, как и большинство интерфейсов jQuery. Я думаю, что это какая-то непоследовательность. Но что ж, answare снова обновился: P Спасибо, Йоханнес.

— Кристофер Рамирес

.lengthСвойство не является частью библиотеки JQuery, это просто родной JavaScript. Но да, иногда это может сбивать с толку.

— Йоханнес Клаус

4

Простой способ

if ($('#text-field > p.filled-text').length != 0)

— Хитеш Модха
источник

2

Метод .size () функционально эквивалентен свойству .length; тем не менее, свойство .length является предпочтительным, потому что оно не имеет накладных расходов, связанных с вызовом функции.

— Hitesh Modha

1

Если это прямой дочерний элемент, вы можете сделать, как показано ниже, если он может быть вложен глубже, удалите>

$("#text-field").keydown(function(event) {
    if($('#popup>p.filled-text').length !== 0) {
        console.log("Found");
     }
});

— Руна FS
источник