Question

有没有办法改变以下内容以使其有效？

for (var i = 0; i < data[1].length; i++) {
            $("#results").append($("<div><a href='"+data[3][i]+"' target='_blank'></a></div>").text(data[1][i]));
            $("#results").append($("<p></p>").text(data[2][i]
            ));       

          }

当我添加div标签时，我失去了a元素，反之亦然，当我改变它们的位置时。我也试过了：

for (var i = 0; i < data[1].length; i++) {          

            $("#results").append($('<div><a/></div>'))
              .find('a').text(data[1][i])
                        .attr("href", data[3][i])
          }

但在这种情况下，我无法定位每个单独的a元素或text。

我的目标是动态添加内置div和a元素的p元素。如果有人对如何实现这一点有任何其他想法，我会感激，因为我难以理解。提前谢谢。

Answer 1

您可以在创建元素的同时合并元素的内容。尝试使用以下代替text()函数来添加html元素中的内容。

  for (var i = 0; i < data[1].length; i++) {
    $("#results")
        .append("<div><a href='" + data[3][i] + "' target='_blank'>" + data[1][i] + "</a></div>")
        .append("<p>" + data[2][i] + "</p>");
}

Answer 2

你错误地嵌套了一些括号，因此其中一个.text()正在应用错误的DOM元素并覆盖已经附加的数据。（特别是text(data[1][i])覆盖了<a>）

你可以把所有东西都变成一个单独的字符串并一次追加，就像在@Tanmay的回答中一样 - 这是一个很好的方法，而且通常很方便。这是一个替代方案，它分别构造节点和属性，在某些情况下可能更易读/可维护。

// This is a strange data structure to depend on. Consider refactoring.
var data = [
  [],
  ["link 1", "link 2", "link 3"],
  ["paragaph 1", "paragraph 2", "paragraph 3"],
  ["/1", "/2", "/3"]
]

for (var i = 0; i < data[1].length; i++) {
  $("#results")
  .append($("<div>")
    .append($("<a target='_blank'>")
      .attr("href", data[3][i])
      .text(data[1][i])
    )
  ).append(
    $("<p>")
    .text(data[2][i])
  );
}

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

另一种重构方法可能是单独生成节点，以便更容易跟踪附加到哪些节点。这在功能上与上述相同：

// This is a strange data structure to depend on. Consider refactoring.
var data = [
  [],
  ["link 1", "link 2", "link 3"],
  ["paragaph 1", "paragraph 2", "paragraph 3"],
  ["/1", "/2", "/3"]
]

for (var i = 0; i < data[1].length; i++) {
  var theA = $("<a target='_blank'>")
    .attr("href", data[3][i])
    .text(data[1][i]);
  var theDiv = $("<div>").append(theA);
  var theP = $("<p>").text(data[2][i]);

  $("#results").append(theDiv).append(theP);

}

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

所有这些都可以随意混合和匹配;性能没有显着差异，因此您可以使用最适合您生成的HTML的任何组合。

JQuery一次追加两个元素并动态更新

2 个答案: