jQuery using .nextAll() back to back to display adjacent XML sibling nodes

Question

I have the following XML:

<building>
    <id>1</id>
    <name>Annex</name>
    <rooms>
        <room>
            <number>100</number>
            <type>conference room</type>
            <capacity>4</capacity>
        </room>
        <room>
            <number>203</number>
            <type>computer lab</type>
            <capacity>30</capacity>
        </room>
    </rooms>
</building>

I have some blocks in a jQuery function that parse particular parent nodes of an XML file, <number> for example. I have some other .on(click) function that passes <number> 's .text() as a parameter called getNum() , usd to display whatever <number> was desired from each click. Anyway, this is working successfully, however I am now trying to display more than just the <number> node, as you can see. I am trying to also display the <number> node's sibling text, <type> and <capacity> . I have tried using the .next() function but it seems to skip a node. So far the only thing I've gotten to half-way work is by using the .nextAll(arg) function; I say half-way because, depending on the argument, I can either get only the <type> node or the <capacity> node to print, not both. Even stranger, with .nextAll() the only parameters that seem to work make no logical sense (see code comments below); instead of 1 and 2 , I found that -1 and 0 only display the nodes accordingly. These values don't make sense to me, can anyone see why?

$room.find('rooms room number').each(function () {
    if (getNum() == $(this).text()) {
        var $numDiv = $('<div>', {
            text: '- Room ' + $(this).text(),
            id: $(this).text()
        }).appendTo($div);

        ///////////////////////////////////////////
        // This SKIPS <type> node and displays <capacity> node    
        // $(this).next().appendTo($div);

        ///////////////////////////////////////////
        // This displays <type> node    
        // $(this).nextAll().eq(-1).appendTo($div);

        ///////////////////////////////////////////
        // This displays <capacity> node    
        // $(this).nextAll().eq(0).appendTo($div);

        ///////////////////////////////////////////
        // This displays neither node. Why?
        // $(this).nextAll().eq(-1).appendTo($div);
        // $(this).nextAll().eq(0).appendTo($div);

    }
});
return $div;

None the less, really my main concern and overall question is how to declare multiple statements; as I can get only one or the other to show up, why can't I declare both this: $(this).nextAll().eq(-1).appendTo($div); and this: $(this).nextAll().eq(0).appendTo($div); back to back?

Answer 1

I found the solution, however I still don't completely understand why the prior statements don't work. Anyway, here's what I had to do:

// Declare each node in its on HTML tag.
$('<h4>', { text: $(this).nextAll().eq(0).text(), class: 'roomText' }).appendTo($div);
$('<h4>', { text: $(this).nextAll().eq(1).text(), class: 'roomText' }).appendTo($div);

If anyone can explain the logic that would be great.