javascript - jquery 从 ajax 输出中按 ID 查找 div

Question

恐怕已经有人问过非常相似的问题了here ，但出于某种原因，它只是输出“null”。

我正在尝试通过 id 从 ajax 输出中找到一个 div html。下面是我的脚本。

// LOAD NAVIGATION
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_navigation.php',
  data: thisButtonType + '=true&loadNav=date',
  success: function(output) { 

    alert(output); // Outputs correctly two divs #navDay, and #navMonth

    alert($(output).find('#navDay').html()); // Results into "null"

    $('#navDay').html($(output).find('#navDay').html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.

    //$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
    //$('#navMonth').html($(output).find('#navMonth').html());

  }

});

第一个警报(输出)结果如下:

<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>

Answer 1

如果您希望能够使用 .find() 或 $(selector, context) - 这些函数，则需要将两个 div 包装在一个外部 div 中只找到后代节点，并且您的 HTML 中有两个没有真正父节点的兄弟节点。

您可以在服务器端进行包装，也可以使用 .wrap()。

此外，.html() 函数只返回标签的内部内容，而不是标签本身。

假设(基于您对 .replaceWith 的使用)您的意图是替换整个元素，而不仅仅是文本，我会这样做:

<div>
    <div id="navDay">Im day nav!</div>
    <div id="navMonth">Im month nav!</div>
</div>

此时您之前无法使用的代码中的这一行也将起作用:

$('#navDay').replaceWith($('#navDay', output));