Блог

Главная - Вопросы по программированию - jQuery addClass для каждого элемента, имеющего x дочерних элементов?

jQuery addClass для каждого элемента, имеющего x дочерних элементов?

#jquery #size #each #children #addclass

#jquery #размер #каждый #дочерние элементы #addclass

Вопрос:

Я хочу добавить класс «что угодно» к каждому элементу, у которого более 2 дочерних элементов. К сожалению, мой код не работает, я думаю, мне нужно определить (это) и, возможно, использовать каждый, но я не уверен, как это сделать.

Вот мой код:

 if ( jQuery('#container .document').children().size() > 2 ) {
     jQuery(this).addClass("anything"); 
}

Неработающий пример:

http://jsfiddle.net/HHSuM/1/

Комментарии:

1. Несколько второстепенных вещей: (1) $( '.document', '#container' ) более эффективен. (2) Вам не нужно использовать jQuery вместо $ , если ваш код jQuery находится внутри готового обработчика (где он должен быть в любом случае), поскольку вы можете передать $ имя в этот обработчик: jQuery(function ($) { ... your code ... });

Ответ №1:

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

 jQuery('#container .document').filter(function() {
    return this.children.length > 2; //Use just the regular DOM children property in here
}).addClass("anything");

JSFiddle: http://jsfiddle.net/HHSuM/4 /

Комментарии:

1. Спасибо за предупреждение childElementCount . :)

Ответ №2:

Перебирайте элементы с помощью .each() :

 $('#container .document').each(function() {
  if (this.children.length > 2) {
    $(this).addClass('anything');
  }
});

Комментарии:

1. Вы также можете протестировать ($(this).children(:gt(1)).length) , но я подозреваю, что использование > вместо :gt быстрее.

2. Спасибо, у меня есть дополнительный вопрос: если у меня на странице около 50 элементов .document и у них около 50-100 дочерних элементов — сильно ли этот код замедлит работу моего сайта?

3. Нет. Вы будете перебирать только 50 .document секунд и считать дочерние элементы, что не должно занимать намного больше доли секунды. Вы уже пробовали запускать код?

4. @Blender должен быть children() (с скобками). Либо $(this).children().length или this.children.length .

5. @Blender, да, это работает как шарм, по крайней мере, на локальном хосте. Большое вам спасибо! 🙂

Ответ №3:

Я подумал, что это было интересно, и попытался использовать :has() в сочетании с :nth-child() , но я получаю синтаксическую ошибку.

 // Does NOT work... why?
jQuery('#container .document:has(*:nth-child(3))').addClass('anything');

Но, слегка изменив подход, работает:

 // Nifty!
jQuery('#container .document *:nth-child(3)').parents('.document').addClass('anything');

По сути, мы ищем элементы с 3-м элементом, а затем перемещаемся вверх по DOM.

Комментарии:

1. должен отдать вам должное, это действительно отличный селектор, хотя для простоты я бы все равно использовал .filter() , конечно, отличная находка

Ответ №4:

Используется .each() для перебора #container .document элементов.

Обновлен ваш jsfiddle. Кажется, работает!

Ответ №5:

здесь у вас есть много вариантов

  1. вы можете использовать .each() для перебора элементов, проверьте в функции обратного вызова, есть ли у них 2 дочерних элемента или более, а затем добавьте класс

  2. другой вариант, который мне нравится больше, — это использование .filter() вот так:

     $('#container .document').filter(function(){  
    return $(this).children().length > 2;
}).addClass('anything');

    или ваш пример: http://jsfiddle.net/saelfaer/HHSuM/6 /