배열에 저장된 동적 div 안에 동적 링크의 href 속성을 모두 가져옵니다.

버튼을 클릭 할 때 몇 가지 동적 요소가 생성되었습니다. 이 버튼을 클릭하면 링크가 포함 된 동적 div가 생성됩니다.배열에 저장된 동적 div 안에 동적 링크의 href 속성을 모두 가져옵니다.

배열 "linkArr"에서 첫 번째 href 속성 값 ("link0.com") 만받습니다.

이 배열 내에 저장된 href 속성을 모두 얻으려면 어떻게해야합니까?

여기 내 코드가 있습니다.

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
     <style> 
      .parent { 
       height: 25%; 
       width: 90%; 
       padding: 1%; 
       margin-left: 1%; 
       margin-top: 1%; 
       border: 1px solid black; 

      } 

      .parent:nth-child(odd){ 
       background: skyblue; 
      } 

      .parent:nth-child(even){ 
       background: green; 
      } 


     </style> 
    </head> 
    <body> 
     <button class="btn btn-primary" onclick="getData()">Get data</button> 

     <div class="box"> 

     </div> 
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script> 

      var content = ""; 

      linkArr = new Array(); 

      function getData(){ 
       var count = 0; 
       for(count=0; count<5; count++) { 
        content+= '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: '+count+'</div><div class="col-md-6"><a href="link'+count+'.com" class="mylink">Link'+count+'</a></div></div></div>'; 

       } 

       $('.box').html(content); 


        $('.box').each(function(){ 
         linkArr.push($(this).find('.mylink').attr('href')); 
         console.log(linkArr); 
        }); 
      } 

     </script> 
     </body> 
    </html>

출처

2017-04-05 Sunny

를 링크의 각 요소 때문에 그냥 선택 모든 .myLink 요소를 얻을 밀어하지 왜 자신의 클래스 href의 각각의 속성이 그들 linkArr 배열에?

var content = "", 
 
    linkArr = []; 
 

 
function getData() { 
 
    var count = 0; 
 
    for (count = 0; count < 5; count++) { 
 
    content += '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: ' + count + '</div><div class="col-md-6"><a href="link' + count + '.com" class="mylink">Link' + count + '</a></div></div></div>'; 
 
    } 
 

 
    $('.box').html(content); 
 
    $('.mylink').each(function() { 
 
    linkArr.push($(this).attr('href')); 
 
    }); 
 
    
 
    console.log(linkArr); 
 
}

.parent { 
 
    height: 25%; 
 
    width: 90%; 
 
    padding: 1%; 
 
    margin-left: 1%; 
 
    margin-top: 1%; 
 
    border: 1px solid black; 
 
} 
 

 
.parent:nth-child(odd) { 
 
    background: skyblue; 
 
} 
 

 
.parent:nth-child(even) { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn btn-primary" onclick="getData()">Get data</button> 
 
<div class="box"></div>

출처

2017-04-05 17:24:03

완벽하게! 고마워요 !!! – Sunny

그래서 $('.box').each 한 번만 실행하는 것입니다, 단 하나의 .box 요소가있다. 자식 요소를 반복하여 선택을 변경하고 작동해야합니다

$('.box .container-fluid parent').each(function(){ 
    linkArr.push($(this).find('.mylink').attr('href')); 
    console.log(linkArr); 
});

출처

2017-04-05 17:23:33

배열에 저장된 동적 div 안에 동적 링크의 href 속성을 모두 가져옵니다.

답변

관련 문제