JQuery - выберите только первый элемент

Как выбрать элемент ТОЛЬКО, если он является первым элементом внутри другого элемента? В приведенных ниже примерах я хочу выбрать и применить margin-top of 0, если h3 является ТОЛЬКО первым элементом.

Я думал, что это сработает:

$('.flexible-content-container .each-flexible-section .text-container h3').each(function() { if ( $(this).is(':first-of-type') ) { $(this).css('margin-top','0'); }
});

Но это выбирает первый h3 в div. Итак, я попробовал:

$('.flexible-content-container .each-flexible-section .text-container h3').each(function() { if ( $(this).is(':first') ) { $(this).css('margin-top','0'); }
});

Но это, кажется, ничего не выбирает.

Есть идеи?

5 ответов

Вы можете использовать первого ребенка

$('.flexible-content-container .each-flexible-section .text-container h3:first-child').css('margin-top','0');

Это выберет потомок h3 .flexible-content-container.each-flexible-section.text-container который является первым дочерним элементом родительского элемента


Использование : первый селектор

$('.flexible-content-container .each-flexible-section .text-container h3:first').css('margin-top','0');

или .first()

$('.flexible-content-container .each-flexible-section .text-container h3').first().css('margin-top','0');

Демо-скрипт

Если у вас несколько классов .text-container,

$('.flexible-content-container .each-flexible-section .text-container').each(function(){ $(this).find('h3:first').css('margin-top','0').css('color','red');
});


Существует несколько решений, но я буду исправлять ваши:

$('.flexible-content-container .each-flexible-section .text-container h3').each( function(index , value) { if ( index == 0 ) {//if it the first element $(this).css('margin-top','0'); }
});

Другие решения:

  1. : первый селектор

  2. : селектор nth-child


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

$('.flexible-content-container .each-flexible-section .text-container h3:first-child').css('margin-top','0');


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

$('.flexible-content-container .each-flexible-section .text-container').each(function(i) { if (i === 0) { $('h3', this).css('margin-top','0'); }
});

или:

$('.flexible-content-container .each-flexible-section .text-container').each(function(i) { $('h3:first', this).css('margin-top','0');
});

licensed under cc by-sa 3.0 with attribution.