Question

I’m trying to add consecutive classes to all list-items in a list with the class of ‘nav’. Essentially, I want every list-item to have a class of ‘nthChild-x’, where x represents its position in the list. I’m a major noob to PHP, so be easy.

Here is the current markup:

<ul id="primaryNav" class="nav">
    <li>Blah Blah Uno</li>
    <li>Blah Blah Dos</li>
    <li>Blah Blah Tres</li>
</ul>

I want this list to be rendered as the following:

<ul id="primaryNav" class="nav">
    <li class="nthChild-1">Blah Blah Uno</li>
    <li class="nthChild-3">Blah Blah Dos</li>
    <li class="nthChild-3">Blah Blah Tres</li>
</ul>

Please don’t reply with a JavaScript or JQuery solution. I know how to do this with JS but need this to be server-side. Also, I don’t necessarily want to target the ID of the list because I’d rather do it once and target all lists (though that could be a start).

Any ideas?

Answer 1

You can use DOMDocument for that.

This one will work with existing classes and won’t add the same class twice.

$dom = new DOMDocument;

$dom->loadHTML($html);

$lists = $dom->getElementsByTagName('ul');

foreach($lists as $list) {
    $index = 1;
    foreach($list->childNodes as $node) {
        if ($node->nodeName != 'li') {
            continue;
        }

        $class = array();

        if ($node->hasAttribute('class')) {
            $class = preg_split('/\s+/', $node->getAttribute('class'));
        }

        $addClass = 'nthChild-' . $index;

        if (in_array($addClass, $class)) {
            continue;
        }

        $class[] = $addClass;

        $node->setAttribute('class', implode(' ', $class));

        $index++;
    }

}

$html = '';

foreach($dom->getElementsByTagName('body')->item(0)->childNodes as $element) {
    $html .= $dom->saveXML($element, LIBXML_NOEMPTYTAG);
}

CodePad.