javascript - jQuery 每个只影响最后一项

Question

我的每个语句只会影响最后一个元素。

为什么？

$("span").each(function(index) {
  var $this = $(this);
  $(".divers-details").html($this.text() + "<br>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wine-name"><span>Cabernetj </span></div>
<div class="wine-name"><span>Caberneth </span></div>
<div class="wine-name"><span>Cabernetg </span></div>
<div class="wine-name"><span>Cabernetl</span></div>
<br/>
<p class="divers-details"></p>

http://jsfiddle.net/UJgAa/931/

Answer 1

这一行是你的问题...

  $(".divers-details").html( $this.text() + "<br>");

html 方法不会附加到 .divers-details div，它只是用新值替换其中的任何内容 - 这意味着它会替换内容。

您想要做的是使用 append 方法，该方法(顾名思义)附加一个值。换句话说...

  $(".divers-details").append( $this.text() + "<br>");

您可以在http://api.jquery.com/append/阅读有关append方法的更多信息。