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

Question

嗨，

我使用这个jquery从另一个页面上的2个div中获取内容，然后将它们插入到我的页面上的两个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包装在父元素中，也可以使用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>