jQuery使用.nextAll()背靠背显示相邻的XML同级节点

Question

我有以下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>

我在jQuery函数中有一些块，它们解析XML文件的特定父节点，例如<number>。我有另一个.on(click)函数，它传递<number>的.text()作为一个名为getNum()的参数，usd来显示每次单击所需的<number>。无论如何，这是成功的，但是我现在尝试显示的不仅仅是<number>节点，正如您所看到的。我还试图显示<number>节点的同级文本<type>和<capacity>。我尝试过使用.next()函数，但它似乎跳过了一个节点。到目前为止，我只完成了一半的工作，那就是使用.nextAll(arg)函数；我说一半是因为，根据参数的不同，我可以只打印<type>节点或<capacity>节点，而不是两者都打印。更奇怪的是，对于.nextAll()，唯一有效的参数似乎没有逻辑意义（参见下面的代码注释）；我发现-1和0只相应地显示节点，而不是1和2。这些价值观对我来说毫无意义，有人明白为什么吗？

$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;

尽管如此，我真正关心的主要问题和总体问题是如何声明多个声明；既然我只能让一个或另一个出现，为什么我不能背靠背地声明这两个：$(this).nextAll().eq(-1).appendTo($div);和这个：$(this).nextAll().eq(0).appendTo($div);？

Answer 1

我找到了解决方案，但我仍然不完全理解为什么前面的语句不起作用。不管怎样，以下是我必须做的：

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

如果有人能解释其中的逻辑，那就太好了。