JQuery; Проверьте, имеет ли объект child $(this)

Интересно, как я могу наилучшим образом увидеть, содержит ли контейнер div дочерний элемент. У меня есть событие click, которое запускает дочерний элемент div id = непрочитанный или div id = read. Я хочу проверить, где находится этот ребенок.

Что-то вроде этого - вот что я думаю:

if ($("#unread").find($(this)))
    alert("unread");
else
    alert("read");

Изменить: $ (this) является потомком двух уровней из #unread или #read.

Привет

Ответы

Ответ 1

Использовать: .children()

if( $("#unread").children().length > 0)
    alert("unread");
else
    alert("read");

ИЗМЕНИТЬ

if($(event.target).closest('#unread').length > 0)
    alert('unread');
else
    alert('read');

Ответ 2

Я думаю, что просто добавление .length должно работать:

if ($("#unread").find($(this)).length > 0)
    alert("unread");
else
    alert("read");

Ответ 3

Вернитесь назад от $(this), чтобы искать #unread в качестве предка, используя closest:

if($(this).closest('#unread').length > 0)
    alert('unread');
else
    alert('read');

В зависимости от вашей структуры HTML это будет быстрее, чем поиск всех дочерних элементов #unread, чтобы найти this. Разница скоростей, вероятно, не будет иметь большого значения, но вы должны знать о возможности перехода назад и о возможных преимуществах этого.

Проверка для предка может быть лучшим совпадением для вашего намерения: у вас есть this в руке, и то, что вы действительно хотите знать, это "внутри #unread?". Использование closest для возврата к дереву DOM точно соответствует заданному вами вопросу.

Если по какой-то причине вы умерли, начиная с #unread и глядя на своих потомков, вы можете использовать find

if($('#unread').find(this))
    alert('unread');
else
    alert('read');

Но этот подход будет работать, только если вы используете хотя бы jQuery 1.6.

Ответ 4

Используйте .closest() или .parents() для поиска дерева по щелчку элемента:

if ($(this).closest("#unread").length == 1)
   // etc

В противном случае вы заинтересованы в ответе non-jQuery? Учитывая, что вы сказали, что div с событием клика находится ровно на два уровня ниже "прочитанных" или "непрочитанных" разделов, вы могли бы просто сделать это:

if (this.parentNode.parentNode.id === "unread")
   alert("unread");
else
   alert("read");

// or just alert(this.parentNode.parentNode.id);

Ответ 5

Интересно, как я в лучшем случае могу видеть, содержит ли контейнер div дочерний элемент.

Используйте $. contains(), особенно если производительность является проблемой.

jQuery.contains(контейнер, содержащийся)

Возвращает: Boolean

Описание: Проверьте, не является ли элемент DOM потомком другого элемента DOM.

Это более эффективно, чем .find(), .children() или .closest(), как рекомендовали другие. Однако имейте в виду, что он принимает только элементы DOM в качестве параметров, а не объекты jQuery (что является частью того, почему его производительность лучше).

В вашем случае вы будете делать:

if ($.contains($("#unread")[0], this))
    alert("unread");
else
    alert("read");