Cibler un id précis

**yann18** · 15/04/2011, 11h45

Bonjour/ bonsoir,

j'ai la ligne suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr id="462"><td>NOM</td><td>Prenom</td><td>NOM.Prenom</td><td>ses4fuie</td><td><a href="editCompte.php?app=462"><img border="0" alt="Edition du compte" src="../images/pencil_48.png" /></a></td></tr>

J'aimerai capturer pour un traitement ultérieur l'id de <tr>, mais je n'arrive pas à l'atteindre! j'ai le jquery suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('td a').click(function(){
quelleLigne = $(this).parent().attr('id');
alert(quelleLigne);
});

Où est-ce que je me trompe ?
merci,

**Bovino** · 15/04/2011, 11h49

Parce que pour toi, le parent de la balise <a> est la balise <tr> ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('td a').click(function(){
quelleLigne = $(this).parent('tr').attr('id');
alert(quelleLigne);
});

**yann18** · 15/04/2011, 11h58

Non, bien sûr, le parent direct étant <td>. C'est pourquoi j'ai écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('td a').click(function(){

**Bovino** · 15/04/2011, 12h01

Envoyé par yann18

Non, bien sûr, le parent direct étant <td>. C'est pourquoi j'ai écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('td a').click(function(){

Euh... oui, donc c'est bien l'événement click de la balise <a> que tu écoutes et dont tu cherches le parent !

**yann18** · 15/04/2011, 12h16

Oui,

!
Quand j'écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

quelleLigne = $(this).parent('tr').attr('id');

Cela me renvoie undefined ! Je vais devenir chèvre !

**SpaceFrog** · 15/04/2011, 13h00

parent est un td ...
le parent du td est un tr

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

quelleLigne = $(this).parent().parent().attr('id');

mais plus pragmatiquement
parents

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

quelleLigne = $(this).parents('tr').attr('id');

**yann18** · 15/04/2011, 14h08

Et la lumière fut ! Au départ, j'avais cru que parent() rassemblait l'ensemble des éléments, à l'instar de parents(). Je n'avais pas compris qu'il fallait le réutiliser à chaque fois pour remonter d'un niveau... Quant à parents(), j'en ignorais son existence... Ca va mieux maintenant, merci!

**FrankOVD** · 21/04/2011, 22h40

Je serait plutôt tenté d'utiliser closest() car on est sûr qu'il ne retournera qu'un résultat. Je me trompe?

**danielhagnoul** · 22/04/2011, 00h38

Bonsoir

Lorsque l'on recherche un parent précis, je crois que closest("tr") est similaire à parents("tr") et qu'il n'y a pas de différence de performance.

parents() permet également d'obtenir un objet jQuery qui contient tous les parents de l'élément du DOM.

closest() peut également s'utiliser comme ceci :
.closest( selector, [ context ] )
.closest( selectors, [ context ] )

Ce qui permet de restreindre la zone de recherche et donc d'améliorer la performance pour une grande hiérarchie DOM.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">	
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<table>
			<tbody>
				<tr>
					<td>
						<p>1 : Un mot pour remplir</p>
					</td>
				</tr>
				<tr>
					<td>
						<p>2 : Un mot pour remplir</p>
					</td>
				</tr>
				<tr>
					<td>
						<p id="test">3 : Un mot pour remplir</p>
					</td>
				</tr>
			</tbody>
		</table>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
			var obj = $("#test").closest(["tr", "table", "h1"], "section");
 
			console.log("closest", obj, obj.length);
 
			$(obj[1].elem).css("background-color", "lightgreen");
 
 
			// p est l'élément du DOM de niveau 1
			// td est level 2
			// tr est level 3
			// table est level 5
			// parents.eq(0) est td (level 2)
			// pour vérification, on agit sur le level 3 : tr
			$("#test").parents().eq(obj[0].level - 2).css("background-color", "red");
 
			// on agit sur le tag table
			$(obj[1].selector).css("color", "blue");
		});
	</script>
</body>  
</html>

Ce qui retourne, pour mon test et dans Firebug, l'objet closest [Object { selector="tr", elem=tr, level=3}, Object { selector="table", elem=table, level=5}]

Nous avons donc un objet contenant les objets trouvés et pour chaque objet le sélecteur utilisé, l'élément du DOM correspondant et son niveau hiérarchique dans le DOM par rapport à l'élément du DOM utilisé pour la recherche.

Je vous remercie d'avoir attiré mon attention sur closest, il gagne à être connu.

Cibler un id précis

jQuery

Discussions similaires

Partager

Partager