임의 항목 제거하기

Question

나는 페이지 상단에 10 개의 이미지와 그 페이지의 나중에 이미지에 관한 10 개의 paragrap을 포함하는 정적 페이지를 가지고 있습니다. 나는 무작위로 4 개 이미지 (나는에 대한 해결책을 발견하는) 보여주고 싶어하지만 난/이미지

html로에 대한 단락 보여 나중에 내가 숨길해야하기 때문에 나오는 텍스트 DIV에 일치하는 방법을 확실 해요 :

를

<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 사이의 6 개의 임의의 고유 한 정수를 가져 오는 함수를 만듭니다. 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>