jQuery –仅选择第一个元素

Question

How does one select an element ONLY if it's the first element within another element? In the examples below, I want to select and apply a margin-top of 0 if the h3 is ONLY the first element.

I thought this would work:

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

But this selects the first h3 in the div. So then I tried:

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

But this doesn't seem to select anything.

Any ideas?

Answer 1

You can use the first-child

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

This will select a descendant h3 of .flexible-content-container .each-flexible-section .text-container which is the first child element of a parent

Answer 2

尝试这个：

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

Answer 3

There is multiple solutions , but i will correct yours :

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

Other solutions:

1. :first Selector

2. :nth-child Selector

Answer 4

Use : first selector

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

or .first()

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

Demo Fiddle

---

If you have multiple .text-container classes,

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

Answer 5

Try this:

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

or:

$('.flexible-content-container .each-flexible-section .text-container').each(function(i) {

       $('h3:first', this).css('margin-top','0');

});