jQuery, cómo cargar el contenido ajax después de un elemento especificado

Question

Es necesario cargar algún contenido ajax después de que el conjunto de campos con la dirección de la clase. Con el siguiente código se reemplazará el contenido de la .Address con el contenido ajax.

    $('.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>

Answer 1

Por lo general hacer que de esta manera:

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);
});

Answer 2

Esto debería funcionar ..

$('.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()

Answer 3

En realidad after requiere que el objeto a append después elemento dado. cuando se llama

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

Se le devolvió la referencia a:

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

ya que no hemos dado nada a la función after para anexar a Dirección por lo que todavía llamamos load en $('.address').

utilizar este script en su lugar:

    $('.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();

esto crea nueva div para envolver el contenido ajax y mostrarla en forma correcta.