Question

I have an ajax call with the following success function:

            success: function(response){
                console.log($(response).siblings());
                $(response).siblings().each(function(){
                    alert("foo");
                    var thing_id = $(this).attr("id").split("-")[0];
                    alert(thing_id);
                    $("#"+thing_id).append(this);
                })

where response is rendered html using this django template (slightly anonymized):

{% for thing in things %}
    <div id="{{ thing.something.id }}-pc">
        <div>
            <span class="tablename">Something Else</span>
            {% include '<some template>' with table=thing.something_else %}
        </div>

    </div>
{% endfor %}

the docs for sibling() state that the selector is not included, which is what I see if I only have one thing in things in my template, but if I have more than one, I get both top level divs alerted in the loop.

What’s going on?!

EDIT (better question): why am I getting both top level divs when there are 2, but 0 when there is only 1, when I call siblings() on $(response)?

Seems like I’m misunderstanding what I’m selecting with $(response). Can anyone clarify?

Answer 1

“So what am I selecting when I say $(response)?”

That gives you a jQuery object that includes all of the top-level elements in your response string. If there were, say, three top-level elements then $(response).length will be 3.

$(response).siblings() then gives you all of the siblings of all of the top-level elements, and because each is a sibling of the other(s) this again returns all of the top-level elements.

If there is only one top-level element then it has no siblings.

So obviously .siblings() is the wrong method to be using here, but I’m not sure what to advise you to use instead because your desired result is still unclear.

You can loop through each top-level element with:

$(response).each(function() {...

To get a particular one you can use .eq(someZeroBasedIndex), e.g., $(response).eq(1) to get the second.

To get all except the first you can use $(response).slice(1).