Jquery加载到多个div中

Question

我想从1个文件加载多个div。我试着这样：

$.get('msg.php', function(data) {
    $("#title").html($(data).find('#title'));
    $("#title2").html($(data).find('#title2'));
});

和msg.php文件

<div id="title">elo2</div>
<div id="title2">elo2</div>

这些不起作用，不加载

Answer 1

由于您的元素都在根级别，因此它们都在$(data)中匹配。您必须使用.filter('#title')来减少已匹配的集。.find('#title')将失败，因为它会搜索子项。

$.get('msg.php', function(data) {
    $("#title").text($(data).filter('#title').text());
    $("#title2").text($(data).filter('#title2').text());
})

或者，您可以使用.load()将AJAX响应的全部内容加载到目标div中。由于您的回复div与目标匹配，因此这可能对您的代码有意义。只需将#title和#title2打包到ID为div的{​​{1}}。

messages

然后改用<div id="messages"> <div id="title"></div> <div id="title2"></div> </div> 。

.load()

http://codepen.io/kylebedell/pen/XdjaMd

Answer 2

如果<div>元素包含父元素，则可以使用$(parrentelement + ' > div).html(data);

这是一个例子：  https://jsfiddle.net/bbogdanov/n6LsyLpz/

Answer 3

$运算符作用于DOM文档（网页上的HTML）。

如果要处理另一个文档（在本例中为msg.php文件描述的文档），则需要对其进行解析（参见jQuery.parseXML）。

请注意，您的有效内容不是有效的XML，您需要添加根元素。

所以我的建议：如果我理解正确你只需要将这些数据传递给客户端，那么用msg.php生成json会更容易：

<?php
$arr = array(
    "title" => "elo2",
    "title2" => "elo2"
); 
echo json_encode($arr);
?>

导致这个json字符串：

{
    "title" : "elo2"
    "title2" : "elo2"
}

然后，您可以直接从数据对象访问属性，无需任何解析：

$.get('msg.php', function(data) {
    $("#title").html(data.title);
    $("#title2").html(data.title2);
}

（jQUery.get页面上还有一个例子，最后一页）