Удаление случайных элементов,

Question

У меня есть статическая страница, содержащая 10 изображений в верхней части страницы и 10 параграфов об этих изображениях позже на странице. Я случайно хочу показать 4 изображений (которые я нашел решение), но я не уверен в том, чтобы они соответствовали к тексту DIV наступающем позже, потому что я должен скрывать/показывать пункты об изображении

HTML-:

<div id="images"> 
<div><img src="img1"></div> 
<div><img src="img2"></div> 
... 
<div><img src="img10"></div> 
</div> 

, а затем на странице

<div id="text"> 
<p>text about image 1</p> 
<p>text about image 2</p> 
... 
<p>text about image 10</p> 
</div> 

randomElements = jQuery("#images div").get().sort(function(){ 
return Math.round(Math.random())-0.5 
}).slice(0,4) 

показать те же пункты, что и случайных изображений Я избрал Я думаю, я должен использовать селектор :nth-child(). Но я не смог узнать, как получить номер ребенка от randomElements.

Answer 1

Предполагая, что все изображения присутствуют в DOM (и просто показать/спрятать), то я бы предложил:

$('#images div:visible').each(
    function(){ 
     var i = $(this).index() 
     $('#text p').eq(i).show(); 
    }); 

Ссылки:

• eq().
• index().
• show().
• :visible selector.

Answer 2

Вы можете использовать .index(), чтобы найти тег абзаца, который соответствует тегу div, который содержит изображение. Создайте функцию, которая получает шесть случайных, уникальных целых чисел от 1 до 10; удалите div и теги абзацев с этим индексом с помощью jquery.

Answer 3

Я бы изменил ваш html, если можно. Это гораздо более семантический подход, и ваш текущий случайный выбор все равно должен работать.

<div id="images"> 
    <div> 
    <img src="img1"> 
    <p>text about image 1</p> 
    </div> 
    <div> 
    <img src="img2"> 
    <p>text about image 2</p> 
    </div> 
    ... 
    <div> 
    <img src="img10"> 
    <p>text about image 10</p> 
    </div> 
</div>