Question

我的html部分类似于：

<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>
<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>
<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>

我有一个jQuery脚本应该影响每个ms-row div中的每个ms-image div。目前，它仅适用于第一个ms-row div。如果我这样做：

$( document ).ready(function() 
    $('.ms-row .ms-image').hide();
    $('.ms-row .ms-image:lt(6)').show();
});

除前六个外，所有ms-image div都被隐藏。我需要显示每个ms行中的前六个div，而不是第一个ms-row div中的前六个。

Fiddle

Answer 1

您正在获取所有ms-image元素，这些元素是ms-row元素的子元素，而结果集中显示的是第6个元素。您要做的是获取每行的前六个而不是

$( document ).ready(function() 
    $('.ms-row .ms-image').hide();
    $('.ms-row').each(function(){
        $(this).find('.ms-image:lt(6)').show();
    });
});

或者@Val指出，通过

避免.each

$( document ).ready(function() 
    $('.ms-row .ms-image').hide();
    $('.ms-row').find('.ms-image:lt(6)').show();
});

Answer 2

你可以在6：

之后隐藏图像

$('.ms-row').each(function(){
    $(this).children('.ms-image:gt(5)').hide();
});

FIDDLE DEMO

或@Val只提出一行：

$('.ms-row').find('.ms-image:gt(5)').hide();

FIDDLE DEMO

Answer 3

您可以使用.each()

$('.ms-image').each(function(){
   $(this).hide();
})

Answer 4

试试这个：

$( document ).ready(function() 
    $('.ms-row .ms-image').each(function(){
$(this).hide();
}
    $('.ms-row .ms-image:lt(6)').each(function(){
$(this).show();
}
});

Answer 5

试试这个：

$( document ).ready(function() 
    $('.ms-row').each(function(){
        $(this).children('.ms-image:gt(5)').hide();
        $(this).children('.ms-image:lt(6)').show()
    });
});

您无需迭代每个ms图像并隐藏它们。你只需要隐藏.ms-image，如果还有六个。

Answer 6

试试这个：

$( document ).ready(function() 
    $('.ms-row .ms-image').hide();
    $('.ms-row').each(function(){
        $(this).find('.ms-image:lt(6)').show();
    });
});

将jQuery应用于div的每个部分

6 个答案: