Générer l'arbre html à partir d'un array

Version imprimable

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//Générer l'arbre html du menu
function displayNav($array) {
	//html du menu
	$html = "";
	if ( count($array )> 0 ) {
		//Menu principal
		$html .= '<ul>';
		foreach ($array as $item) {
			$html .= '<li>';
			$html .= '<a href="#"';
			if ( $item['css'] ) $html .= ' class="'.$item['css'].'"';
			$html .= '>'.$item['name'].'</a>';
			//Sous menu
			( is_array($item['subs']) && count($item['subs']) > 0 ) ? $html .= displayNav($item['subs']) : '';
			$html .= '</li>';
		}
		$html .= '</ul>';
	}
	return $html;
}
 
$temp = array(
	array('name' => 'Accueil', 'css' => NULL, 'subs' => NULL),
	array('name' => 'Pays', 'css' => NULL, 'subs' => array(
		array('name' => 'Rca', 'css' => NULL, 'subs' => NULL), 
		array('name' => 'Rdc', 'css' => 'current', 'subs' => NULL), 
		array('name' => 'Tchad', 'css' => NULL, 'subs' => NULL))
	),
	array('name' => 'Contact', 'css' => NULL, 'subs' => NULL)
);
 
echo displayNav($temp);

Résultat

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li><a href="#" class="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>

Je souhaite donc modifier displayNav() pour ajouter une classe .chemin sur les parents li de .current.

Voici le résultat attendu

Code:

1
2
3
4
5
6
7
8
9
10
11
<ul>
	<li><a href="#">Accueil</a></li>
	<li class="chemin"><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li class="chemin"><a href="#" class="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>

En JavaScript, je le fais ainsi avec jQuery

Code:

1
2
 
$('.current').parents("li").addClass('chemin');

Comment le faire en Php ?

Merci d'avance...

11/09/2012, 19h06
Benjamin Delespierre

avec DOMDocument et DOMXPath

Ne te fais pas d'illusions, ce ne sera pas aussi simple qu'avec jQuery.

J'ai essayé ceci ça ne marche pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$html =  '<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li><a href="#" id="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>';
 
$dom = new DOMDocument();
$dom->loadHTML($html);
foreach($dom->getElementById('current') as $current){
    $continue=true;
    $parent = $current->parentNode;
     while($continue){
         if($parent->tagName == 'li'){
            $parent->setAttribute('class',$parent->getAttribute('class').' chemin');
            $parent = $parent->parentNode;
 
         }else{
              $continue = false;
         } 
     }
}
echo $dom->saveHTML();

Pas de message d'erreur mais la classe .chemin n'est pas ajoutée.

Merci pour votre aide.

mmmh beaucoup de code pour pas grand chose...

Voici une version plus "light":

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$html =  '<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li><a href="#" id="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>';
 
libxml_use_internal_errors(false);
 
$doc = new DOMDocument;
$doc->loadHTML($html);
 
if ($anchor = $doc->getElementById('current')) {
	$parent = $anchor->parentNode;
	if ($parent && $parent->nodeName == 'li')
		$parent->setAttribute('class', $parent->getAttribute('class') . ' chemin');
}
 
echo "<pre>" . htmlentities($doc->saveHTML()) . "</pre>";

Chez moi ça fonctionne impec. Je ne vois pas pourquoi tu as utilisé une boucle :koi:

Un début de solution

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function getbreadcrumb($doc, $checkclass, $addclass, $tag = null){
	$return = false;
	if ( $anchor = $doc->getElementById($checkclass) ) {
		$parent = $anchor->parentNode;
		if ( $parent && $parent->nodeName == $tag ) {
			if ( $parent->hasAttribute ('class') ) {
				$class = $parent->getAttribute('class');
				$array_class = explode(' ', $class);
				if ( !in_array($addclass, $array_class) ) $parent->setAttribute('class', $parent->getAttribute('class') . $addclass);
			}
			else $parent->setAttribute('class', $addclass);
			$return = $doc->saveHTML();
			//La récursive à ce niveau s'impose... 
                        $parent = ($parent->parentNode)->parentNode;
 
		}
	}
	return $return;
}
 
$html =  '<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li><a href="#" id="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>';
$doc = new DOMDocument();
$doc->loadHTML($html);
$html = getbreadcrumb($doc, 'current', 'chemin', 'li');
echo $html;

Ce code me retourne :

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><ul><li><a href="#">Accueil</a></li>
	<li><a href="#">Pays</a>
		<ul><li><a href="#">Rca</a></li>
			<li class="chemin"><a href="#" id="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul></li>
	<li><a href="#">Contact</a></li>
</ul></body></html>

Moi je souhaite obtenir ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
<ul>
	<li><a href="#">Accueil</a></li>
	<li class="chemin"><a href="#">Pays</a>
		<ul>
			<li><a href="#">Rca</a></li>
			<li class="chemin"><a href="#" id="current">Rdc</a></li>
			<li><a href="#">Tchad</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>

2 soucis se posent :

Tous les li parents de #current devrait posséder la classe .chemin (juste le parent direct l'a pourtant nous devrons monter à tous les li parents). Une récursive s'impose.
Les doctype, head, body je n'en ai pas besoin.

Que faire ?

Merci d'avance...

12/09/2012, 20h22
okoweb

Citation:

Envoyé par Benjamin Delespierre

pourquoi tu as utilisé une boucle :koi:

Jusque pour ajouté une classe .chemin à tous les parents li (père, grand père, arrière grand...) de .currrent.

Merci...

Ok, j'avais pas compris ça ;)

Remarque, c'est pas beaucoup plus difficile:

Code:

1
2
3
4
5
6
7
8
9
10
11
$doc = new DOMDocument;
$doc->loadHTML($html);
 
if ($current = $doc->getElementById('current')) {
	while ($current = $current->parentNode) {
		if ($current->nodeName == 'li')
			$current->setAttribute('class', ltrim($current->getAttribute('class') . ' chemin'));
	}
}
 
echo "<pre>" . htmlentities($doc->saveHTML()) . "</pre>";

Citation:

Envoyé par Benjamin Delespierre

Ok, j'avais pas compris ça ;)

Remarque, c'est pas beaucoup plus difficile:

Code:

1
2
3
4
5
6
7
8
9
10
11
$doc = new DOMDocument;
$doc->loadHTML($html);
 
if ($current = $doc->getElementById('current')) {
	while ($current = $current->parentNode) {
		if ($current->nodeName == 'li')
			$current->setAttribute('class', ltrim($current->getAttribute('class') . ' chemin'));
	}
}
 
echo "<pre>" . htmlentities($doc->saveHTML()) . "</pre>";

Exactement exact pour la récursion, merci.
Résultat

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><ul><li><a href="#">Accueil</a></li>
	<li class="chemin"><a href="#">Pays</a>
		<ul><li><a href="#">Rca</a></li>
			<li class="chemin"><a href="#">Cameroun</a>
				<ul><li><a href="#">Yaounde</a></li>
					<li class="chemin"><a href="#" id="current">Douala</a>
				</li></ul></li>
			<li><a href="#">Tchad</a></li>
		</ul></li>
	<li><a href="#">Contact</a></li>
</ul></body></html>

Mais un souci persiste. Du html intrusif. Les doctype, html, head et body. Je n'en ai pas besoin.

Moi je souhaite juste :

Code:

1
2
3
4
5
6
7
8
9
10
11
<ul><li><a href="#">Accueil</a></li>
	<li class="chemin"><a href="#">Pays</a>
		<ul><li><a href="#">Rca</a></li>
			<li class="chemin"><a href="#">Cameroun</a>
				<ul><li><a href="#">Yaounde</a></li>
					<li class="chemin"><a href="#" id="current">Douala</a>
				</li></ul></li>
			<li><a href="#">Tchad</a></li>
		</ul></li>
	<li><a href="#">Contact</a></li>
</ul>

Comment éjecter ce html en trop ?

Merci d'avance...

Citation:

Envoyé par okoweb

Mais un souci persiste. Du html intrusif. Les doctype, html, head et body. Je n'en ai pas besoin.
Comment éjecter ce html en trop ?

Le paramètre DOMNode fait affaire.

Code:

DOMDocument::saveHTML ([ DOMNode $node = NULL ] )

Pour notre cas j'ai modifié ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 11 if ($current = $doc->getElementById('current')) { $node = null; while ($current = $current->parentNode) { if ($current->nodeName == 'li') { $current->setAttribute('class', ltrim($current->getAttribute('class') . ' chemin')); $node = $current->parentNode; } } } echo "<pre>" . htmlentities($doc->saveHTML($node)) . "</pre>";
Merci pour votre aide.