javascript - 如何在一个 jQuery 函数上调用另一个 jQuery 函数？

Question

如何在另一个 jQuery 函数上调用一个 jQuery 函数？

我正在尝试使用 jQuery setInterval 和 load 函数刷新 div 的内容。到目前为止，一切工作正常，除了加载完整的 div，包括 div 标签。我只想重新加载/刷新 div 的内容。我尝试添加 jQuery 函数 text() ，但它不起作用，或者我可能编写了错误的语法。

$('#numberOfTries').load('index.php #numberOfTries').text();不起作用。

这是我到目前为止所拥有的，它可以工作，但会使用 div 标签加载整个 div:

Index.php 的 HTML(顶部)

<div id="numberOfTries"><?php echo $numberOfTries; ?></div>

Index.php 的 JS(下)

<script src="assets/js/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    setInterval(function() {
        $('#numberOfTries').load('index.php #numberOfTries');
    }, 1000);
});
</script>

该脚本加载完整的 div，即 <div id="numberOfTries">50</div> ，但我只想加载div的内容，即 50 .

当脚本运行时，HTML 最终看起来像这样:

<div id="numberOfTries">
<div id="numberOfTries">50</div>
</div>

但我只希望它看起来像这样:

<div id="numberOfTries">
50
</div>

我认为我的语法$('#numberOfTries').load('index.php #numberOfTries').text();不正确。

如果需要澄清，请告诉我。

Answer 1

您误解了.load()的用法。

在您的调用中，您将加载 index.php 页面，并获取 ID 为 numberOfTries 的元素并将其放置在同一个 div.

要实现您想要做的事情，您需要使用 .load() 回调:

$("#numberOfTries").load("index.php #numberOfTries", function() {
  // Load the resource and look for the element.
  // When it's done, return this element .text().
  return $(this).text();
}).text();

jQuery .load()

作为旁注，值得澄清的是 .text() 可以很好地处理您的示例，但您可能会将一个 div 嵌套在另一个 div 中，更糟糕的是，两者共享相同的 ID。

但无论如何它都会起作用:Demo