Question

我点击按钮时会生成一些动态元素。单击此按钮，我会生成包含链接的动态div。

我只获得数组“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>

Answer 1

只有一个.box元素，因此$('.box').each只会运行一次。更改您的选择器以迭代子元素，它应该工作：

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

Answer 2

由于每个链接元素都有自己的类，为什么不使用选择器获取所有.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>

获取存储在数组中的动态div内的动态链接的所有href属性

2 个答案: