Show each first element in a list of parent elements (jQuery+CSS)

Question

I'm a bit stuck here. I'm trying to show the first div for each section I have using jQuery. There's multiple parent elements .each-business-content-extra which has a few child elements .each . Each .each is set to display none via the CMS, but I want the first .each in each .each-business-content-extra that exists to be set to display:block.

I tried this —

$('.each-business-content-extra .each:first').each(function() {
  $(this).show();
});

Any ideas?

Thanks, R

Answer 1

You can use .eq() to target the first element of each .each class. http://api.jquery.com/eq/

Try this:

$('.each-business-content-extra .each:eq(0)').each(function() {
  $(this).show();
});

Alternatively, try this:

$('.each-business-content-extra .each:eq(0)').css('display', 'block');

Answer 2

尝试这个：

  $('.each-business-content-extra').children(":first").show();

Answer 3

You can do it your way, but the correct selector is :first-of-type :

$('.each-business-content-extra .each:first-of-type').each(function() {
  $(this).show();
});

Answer 4

您可以尝试这个简单的方法，

$('.each-business-content-extra .each:first-child').show();

Answer 5

Try

$('.each-business-content-extra').find('.each:first').show()

Demo: Fiddle

Answer 6

Turns out it was a combination of everyones...

$('.each-business-content-extra').each(function() {
  $(this).find('.each:first').show();
});

Thanks so much.