jQuery,如何在指定元素后加载ajax内容

时间:2010-01-27 11:36:33

标签: jquery ajax

我需要在带有类地址的字段集后加载一些ajax内容。使用下面的代码,它将使用ajax内容替换.address的内容。

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after().load('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html');
    $(this).next().toggle('slow');
    return false;
}).next().hide();

<div style="display: none;">
<fieldset class="address">
<!-- AJAx CONTENT GOES HERE -->
    <ol>
        <li>Stadhouderskade 78</li>
        <li> Amsterdam-Zuid</li>
        <li>020-5239666</li>
    </ol>
</fieldset>
<!-- BUT THE AJAx CONTENT NEEDS TO GO HERE -->
<span class="tags">Tags: museum</span>
</div>

3 个答案:

答案 0 :(得分:4)

我通常这样做:

var clicked = $(this);
$.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
function(data){
    alert("Data Loaded: " + data);
    $(clicked).next().find('.address').after(data);
});

答案 1 :(得分:0)

这应该有用..

$('.accordion .head').click(function() {
    $next = $(this).next();
    $.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
          function(data){
                         $next.find('address').after( data );
                        }
         ).end().toggle('slow');
    return false;
}).next().hide()

答案 2 :(得分:0)

实际上after要求在给定元素之后附加对象。当你打电话

$(this).nex().find('addresss').after()

您将返回对以下内容的引用:

'address' + [content appended by `after`]

因为我们没有向after函数提供任何附加到地址的内容,所以我们仍在load上调用$('.address')

改为使用此脚本:

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after($("div/>")
     .load('http://test.dev/search/view/IdDaytrip/' + 
         $(this).attr('id') + '.html'));
    $(this).next().toggle('slow');
    return false;
}).next().hide();

这会创建新的div来包装ajax内容并以正确的方式显示它。