无法使用 find() 或任何 jquery 标准选择器

Question

嗨，

我正在使用这个 jquery 从另一个页面上的 2 个 div 中获取内容，然后将它们插入到我页面上的 2 个 div 中：

$.get("fruits.php", function(data){
  var pears = $("#mainDiv", data);
  var apples = $("#subDiv", data);

   $("#cont1").html(pears);
   $("#cont2").html(apples);
});

但什么也没有发生，根本没有获取任何内容，我在控制台上也没有收到任何错误。我也试过：

$(data).find("#mainDiv");
$(data).find("#subDiv");

但也没用。这是为什么？我正在使用最新版本的 jquery。

顺便说一下，源页面是这样的：

<div id="mainDiv">some pears</div>
<div id="subDiv">some apples</div>

而我的页面是这样的：

<div id="cont1"></div>
<div id="cont2"></div>

谢谢。

Answer 1

问题是因为 $(selector, context) 调用在内部使用了 find() 方法。由于您没有根元素，并且您正在寻找的目标是兄弟姐妹，因此没有父元素可以找到任何东西。

要更正此问题，您可以将来自 fruits.php 的 HTML you return 包裹在父元素中，或者改用 filter()：

let data = '<div id="mainDiv">some pears</div><div id="subDiv">some apples</div>';

// inside AJAX callback:
let $data = $(data);
var $pears = $data.filter("#mainDiv");
var $apples = $data.filter("#subDiv");

$("#cont1").html($pears);
$("#cont2").html($apples);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont1"></div>
<div id="cont2"></div>

Answer 2

对@RoryMcCrossan 的答案的这种轻微修改处理了目标 div 不是顶级元素的情况，在这种情况下 filter() 将不起作用。

let data = '<div id="mainDiv">some pears</div><div id="subDiv">some apples</div>';

// inside AJAX callback:
let $data = $('<div/>').html(data);
var $pears = $data.find("#mainDiv").html();
var $apples = $data.find("#subDiv").html();

$("#cont1").html($pears);
$("#cont2").html($apples);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont1"></div>
<div id="cont2"></div>

无法使用 find() 或任何 jquery 标准选择器

cant get find() or any jquery standard selector to work

jquery

selector