Question

在我的网站上，我有一个名为learn-more.html的文件，它用于使用AJAX从index.html加载内容。

学习-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
    Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

我在index.html中有以下脚本

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html #main-images', function (data) {
                        alert(data);
                });
</script>

问题： 警报打印出以下内容：learn-more.html

<div id="something" class="hero-unit span-one-third" style="position: relative;">
Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

预期警报应打印以下内容：<div id="main-images">

<div id="learn-more-photo" class="span-one-third">
    <img class="thumbnail" src="http://placehold.it/300x180" alt="">
</div>

这可能会发生什么？

编辑：我愿意用真实文件上传一个.zip ...它只是index.html plust learn-more.html和css，如果有人有兴趣让我知道。

EDIT2：打印出整个learn-more.html内容

$.get('ajax/learn-more.html #main-images', function (data) {            
    alert(data);
});

Answer 1

我认为这就是你要找的东西：

$.get('ajax/learn-more.html', function (data) {
    var foo = $("#main-images", data);

    alert(foo.html());
});

修改

嗯，试试这些提醒，看看我们是否接近：

$.get('ajax/learn-more.html', function (data) { var foo = $("#main-images", data); alert(foo.length); alert(foo.hasClass('hero-unit span-one-third')); alert(foo.html()); });

修改

也许尝试在jQuery函数中包装数据变量？

$.get('ajax/learn-more.html', function (data) { data = $(data); var foo = $("#main-images", data); alert(foo.length); alert(foo.hasClass('hero-unit span-one-third')); alert(foo.html()); });

Answer 2

不要使用$.get()来执行此操作，而是尝试使用load方法：

$(target).load('ajax/learn-more.html #main-images', function(data){
  alert(data);
});

Answer 3

尝试提及回复datatype

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html', function (data) {
                        alert($(data).find('div#main-images').html());
                },
               'html');
            });
        });
</script>

Answer 4

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $.get('ajax/learn-more.html', function (data) {
                        var main_images = $(data).find("#main-images");
                        alert(main_images);
                });
</script>

Answer 5

我解决了我的问题，

$（data）返回一个元素数组，而不是jQuery对象。 $（data）[x]包含我正在寻找的元素。

要检索它，我最终使用

$(data).filter('#main-images');

感谢大家的帮助！

Jquery通过ajax加载错误的HTML？

5 个答案: