Применить jQuery к каждому разделу div

Question

Применить jQuery к каждому разделу div

0

У меня есть раздел 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, который должен влиять на каждый каждый div файл ms-image в каждом div-строке ms. В настоящее время он применяется только к первому разделителю строк ms. Если я сделаю что-то вроде:

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

Все разделители ms-изображений скрыты, за исключением первых шести. Мне нужно, чтобы первые шесть divs в каждой строке ms отображались, а не первые шесть только в первом разделителе строк ms.

скрипка

user715564 04 апр. 2014, в 23:37

Источник

Теги:

javascript

jquery

html

css

6 ответов

1

Вы можете просто скрыть изображение детей после 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

MamaWalter 04 апр. 2014, в 18:37

0

Попробуй это:

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

Вам не нужно перебирать каждое изображение ms и скрывать их. Вам нужно всего лишь скрывать.ms-образ, если их больше.

mrrobot 04 апр. 2014, в 19:50

0

Попробуй это:

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

Michał Staniewski 04 апр. 2014, в 19:35

0

Попробуй это:

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

Carlos Calla 04 апр. 2014, в 18:31

0

Вы можете использовать .each()

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

Y.Puzyrenko 04 апр. 2014, в 18:20

Ещё вопросы

NaNpx · Accepted Answer · 2014-04-04T19-53-00.000Z

Вы получаете все элементы 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();
});

А, ну ладно. Я пробовал .each () раньше, но я не использовал $ (this) .find (), и это было проблемой. Спасибо за помощь!
Вы можете сделать это немного проще, избегая .each() : $('.ms-row').find( '.ms-image:lt(6)').show(); .each() $('.ms-row').find( '.ms-image:lt(6)').show();