使用jquery和javascript遍历dom的正确方法以及“;这个“;

Proper way to traverse the dom with jquery and javascript and usage of "this"

本文关键字：方法 这个 jquery javascript 遍历 dom 使用      更新时间：2024-03-08

这是我的HTML:

<div class="tour" data-daily-price="357">
  <h2>Paris, France Tour</h2>
  <p>$<span id="total">2,499</span> for <span id="nights-count">7</span> Nights</p>
  <p>
    <label for="nights">Number of Nights</label>
  </p>
  <p>
    <input type="number" id="nights" value="7">
  </p>
</div>

这是我的错误代码，用于更改span元素的测试以读取我在数字输入中键入的内容。

$(document).ready(function() {
  $("#nights").on("keyup", function() {
    $("#nights-count").text($("#nights").val());
  });
});

这是正确的代码：

$(document).ready(function() {
  $("#nights").on("keyup", function() {
    $("#nights-count").text($(this).val());
  });
});

为什么我需要利用自我而不是#夜晚来工作？

如果您的文档中有多个id，名称为#nights，则默认情况下会选择第一个id为#nights的id。其中this将指示当前选定的DOM元素，而不是#nights id。如果您使用this，它将指示当前所选DOM元素，这就是为什么在#nights有多个id的情况下，您可以获得正确的输出。

除非#nights不是唯一的ID，否则它应该可以正常工作。例如，如果有多个"tour"div，每个都有一个#nights元素。也就是说，$(this)更好，因为它不需要jQuery再次解析DOM。。。

问题是您有多个id为nights的元素。您的第一块代码可以工作：http://jsfiddle.net/fomd990c/

如果您有另一个id为nights的元素，则它不会：http://jsfiddle.net/fomd990c/1/

通常，将特定id限制为仅一个元素是一个好主意。

相关文章：