Question

我需要将嵌套元素附加到页面

我正在使用append函数，但是在尝试将数组传递给它时遇到错误。

<div id="area">
</div>

var data = [{"class":"a", "href":"http://google.com"}, {"class":"b", "href":"http://yahoo.com"}];

$('#area').append(
    $('<ul>').append(
        $(data).each(function(i, val) {
            $('<li>', {class: val["class"]}).append(
                $('<a>', {href: val["href"]})
        })
    )
)

当我这样做时，我在append函数的输入上出错，因为我正在传递.each。我需要根据给定的数组动态地执行此操作，以添加一组嵌套元素，以便最终实现。

<div id="area">
    <ul>
        <li class="b">
            <a href="http://yahoo.com"></a>
        </li>
        <li class="a">
            <a href="http://google.com"></a>
        </li>
    </ul>
</div>

所以我想知道如何传递.each来追加，或以不同的方式做类似的事情。

感谢所有先进的人！

Answer 1

＆＃13;

var data = [{
  "class": "a",
  "href": "http://google.com"
}, {
  "class": "b",
  "href": "http://yahoo.com"
}];
var ul = $('<ul/>'); //create the ul
$(data).each(function(i, val) { //loop the data
  ul.append('<li class=' + val.class + '><a href=' + val.href + '>' + val.href + '</li>'); //append each value on li the class and href
  $('#area').append(ul) //append the ul to the div
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
</div>

＆＃13;

Answer 2

您的代码中没有任何内容将<li>附加到<ul>，因为$(data).each会返回jQuery对象中包含的data数组。

你应该使用$.each来迭代非jQuery对象，并且在连接到DOM之前总是尝试缓存引用并在内存中进行操作。

请注意，与其他答案不同，下面的代码只操作一次实际的DOM。

var data = [{
  "class": "a",
  "href": "http://google.com"
}, {
  "class": "b",
  "href": "http://yahoo.com"
}];
var $ul = $('<ul>');
$.each(data, function(i, val) {
  var $li = $('<li>', {
    class: val["class"]
  });
  $li.append(
    $('<a>', {
      href: val["href"],
      text: val["href"]
    }));
  $ul.append($li);
});
$('#area').append($ul);
//--------^--- one time DOM manipulation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">

</div>

jquery附加嵌套元素

2 个答案: