Question

如果元素是另一个元素中的第一个元素，那么如何选择元素？在下面的例子中，如果h3只是第一个元素，我想选择并应用margin-top为0.

我认为这样可行：

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

但是这会选择div中的第一个h3。所以我试过了：

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

但这似乎没有选择任何东西。

有什么想法吗？

Answer 1

您可以使用first-child

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

这将选择.flexible-content-container .each-flexible-section .text-container的后代h3，这是父母的第一个子元素

Answer 2

试试这个：

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

Answer 3

有多种解决方案，但我会纠正你的：

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

其他解决方案：

Answer 4

使用 : first 选择器

$('.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');

<强> Demo Fiddle

如果您有多个.text-container班级，

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

Answer 5

试试这个：

$('.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');

});

jQuery - 仅选择第一个元素

5 个答案: