删除随机项目，

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标签对齐的段落标签。创建一个函数，获取6个介于1和10之间的随机唯一整数；使用jquery删除带有该索引的div和段落标记。

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>