将jQuery应用于div的每个部分

Question

我有一段类似于html的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中的前六个div.

小提琴

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