PHP排序DOM元素和替换

Question

I currently have a ul list that looks like this:

<ul id="primary-nav">
    <li class="navButton" id="amps_off_button" data-order="6">
        <span class="navButton-color red"><p>AMPS Off</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="amps_alarms" data-order="7">
        <span class="navButton-color"><p>AMPS Alarms</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="sysConfig" data-order="3">
        <span class="navButton-color"><p>System Configuration</p></span>
        <span class="glare"></span></li>
    <li class="navButton" id="system" data-order="4">
        <span class="navButton-color"><p>System</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="backBtn" data-order="100">
        <span class="navButton-color"><p>BACK</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="rescan" data-order="101">
        <span class="navButton-color"><p>ReScan</p></span>
        <span class="glare"></span>
    </li>
</ul>

In my Navigation class, I have a function that can be called that will sort the order of the unordered list by the value in data-order:

public function setOrder() {
    $liNodeList = $this->xpath->query("//ul[@id='primary-nav']//li");
    $liNodes = iterator_to_array($liNodeList);

    usort($liNodes, array('Navigation', 'sortListByOrderAttr'));

    if ($liNodeList->length == count($liNodes)) {
        for ($i = 0; $i < $liNodeList->length; $i++) {
            $node = $liNodeList->item($i);
            $newNode = $liNodes[$i];
            $node->parentNode->replaceChild($newNode, $node);
        }
    }
    else echo "error";
}

private static function sortListByOrderAttr($a, $b) {
    return (int) $a->getAttribute('data-order') - (int) $b->getAttribute('data-order');
}

For some reason, I am not getting the correct order of the list. Instead, the output shows 4 items instead of the 6 items it's supposed to show:

<ul id="primary-nav">
    <li class="navButton" id="amps_off_button" data-order="6">
        <span class="navButton-color red"><p>AMPS Off</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="amps_alarms" data-order="7">
        <span class="navButton-color"><p>AMPS Alarms</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="backBtn" data-order="100">
        <span class="navButton-color"><p>BACK</p></span>
        <span class="glare"></span>
    </li>
    <li class="navButton" id="rescan" data-order="101">
        <span class="navButton-color"><p>ReScan</p></span>
        <span class="glare"></span>
    </li>
</ul>

I suspect my problem here is that my $node->parentNode->replaceChild($newNode, $node); is no es bueno. Maybe I need a different approach to sort this? Help appreciated!

Answer 1

Well, after thinking about what cHao was saying, it appears that after re-reading how replaceChild works, it explains why my method didn't yield the correct result, due to the new child nodes already existed in the node set.

I've fixed the code as such:

public function setOrder() {
    $liNodeList = $this->xpath->query("//ul[@id='primary-nav']//li");
    $liNodes = iterator_to_array($liNodeList);

    usort($liNodes, array('Navigation', 'sortListByOrderAttr'));

    if ($liNodeList->length == count($liNodes)) {
        for ($i = 0; $i < $liNodeList->length; $i++) {
            $node = $liNodeList->item($i);
            $newNode = $this->doc->importNode($liNodes[$i], TRUE);
            $node->parentNode->appendChild($newNode);
        }
    }
    else echo "error with nav menu";
}