11548 sujets

JavaScript, DOM et API Web HTML5

Problème : Récupération des parents dans un menu Arborescent (Jquery)

Bonjour tout le monde, je souhaiterai savoir si vous connaissiez un moyen de récupérer l'attribut de chaque parent, d'un élément d'une liste arborescente avec jquery?

Exemple :

Aliments:
--Fruits:
----Pomme
----Banane
----Fraise

Je voudrais par exemple en cliquant sur 'Fraise', récupérer 'Fruits' et 'Aliments'.
Si vous avez des pistes, je suis preneur! Smiley cligne

Merci.
Modifié par lorenzo_one (16 Sep 2011 - 15:46)
Bonjour Vaxilart, j'ai déjà essayé d'utiliser cette méthode ainsi que la méthode parent() et children() mais ça ne fonctionne pas pour ma part.

Par exemple quand j'utilise ceci : 
	$("#simpleTree span").live('click', function(e) { 
		e.preventDefault; 
		alert($(this).parents().text()); 
	});

Cela m'affiche tous les textes de ma page

Quand j'utilise ceci :

	$("#simpleTree span").live('click', function(e) { 
		e.preventDefault; 
		alert($(this).parent().text()); 
	});

Cela m'affiche (Quand j'appui sur Aliments) AlimentsFruitsPommeBananeFraise, en gros toute ma liste

Et quand j'utilise children(), cela ne m'affiche rien.

Je ne vois vraiment pas comment résoudre mon problème, donc si quelqu'un a une idée je suis tout ouïe! Smiley cligne
Modifié par lorenzo_one (19 Sep 2011 - 09:26)
Je commence à désespérer, car même avec la méthode .prev() je n'y arrive pas!! A mon avis leurs utilisations, je ne les maîtrises pas!!

Personne n'aurait un exemple concret que je pourrais adapter à ma situation?
Modifié par lorenzo_one (19 Sep 2011 - 15:32)
Salut,

Il faut parcourir la liste du début jusqu'au un nœud parent de l'élément cliquer + l'élément cliquer lui même.


//ajoute le niveau de hiérarchie dans les ul
function add_level(el, level)
{
	$(el).data("level", level++)
	.children().children()
	.each(function(){
		add_level(this, level)
	})
}

$(document).ready( function(){
	$root = $("#menu > ul");

	//récupère le texte des span jusqu'à ce que level === 0
	var get_text = function($e, level){
		if (!--level)
			return "";
		var text = "";
		$e.each(function(){
			text += $(">span", this).text()+
			","+get_text($(">li>ul",this), level)
		})
		return text;
	}

	$root.each(function(){
		add_level(this, 1)
	})
	.find("li")
	.click(function(){
		var ul = this.parentNode;
		var l = get_text($root, $.data(ul, "level")) + $(">span", ul).text();
		alert("level "+$.data(ul, "level")+":"+l)
		return false;
	});
});



ul {
	background-color:rgba(0,255,0,.1)
}
li {
	border:1px green solid
}



<navigation id="menu">
<ul class="level-1" data-level="1">
	<span>AA</span>
	<li class="item-i">I</li>
	<li id="ii" class="item-ii">II
	<ul class="level-2" data-level="2">
	<span>BB</span>
		<li class="item-a">A</li>
		<li class="item-b">
			<ul class="level-3" data-level="3">
			<span>CC</span>
				<li class="item-1">1</li>
				<li class="item-2">2</li>
				<li class="item-3">3</li>
			</ul>
		</li>
		<li class="item-b">
			<ul class="level-3" data-level="3">
			<span>CC2</span>
				<li class="item-1">1</li>
				<li class="item-2">2</li>
				<li class="item-3">3</li>
			</ul>
		</li>
		<li class="item-c">C</li>
	</ul>
	</li>
	<li class="item-iii">III</li>
</ul>
</navigation>
Merci Jo_link_noir pour ta réponse et ton bout de code. Malheureusement, je n'arrive pas à l'adapter à mon cas. Et je ne le comprend pas totalement.
Modifié par lorenzo_one (21 Sep 2011 - 10:46)
Je me suis inutilement la tête pris, et de plus il y avais une erreur dans get_text Smiley ohwell .
J'ai fait une version simplifier et beaucoup plus clair, qui je pense ce passe d'explications Smiley smile 

$(document).ready( function(){
	var menu = document.getElementById("menu");

	var get_titles = function(ul){
		var a = [];
		//remonte le DOM jusqu'à menu
		while (1) {
			a.unshift($(">span", ul).text());
			if ((ul = ul.parentNode) === menu)
				break;
			ul = ul.parentNode;
		}
		return a;
	}

	$("li", menu).click(function(){
		var ul = this.parentNode;
		var l = get_titles(ul);
		alert(l)
		return false;
	});
});

Modifié par jo_link_noir (27 Sep 2011 - 15:17)
Sujet clos
Aller à