Cibler un id précis

Version imprimable

15/04/2011, 11h45
yann18

Cibler un id précis
Bonjour/ bonsoir,

j'ai la ligne suivante:

Code:

<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:

1 2 3 4 $('td a').click(function(){ quelleLigne = $(this).parent().attr('id'); alert(quelleLigne); });
Où est-ce que je me trompe ?
merci,

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

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

15/04/2011, 11h58
yann18

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

Code:

$('td a').click(function(){
15/04/2011, 12h01
Bovino

Citation:

Envoyé par yann18

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

Code:

$('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 ! :aie:
15/04/2011, 12h16
yann18

Oui, :aie: !
Quand j'écris

Code:

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

Cela me renvoie undefined ! Je vais devenir chèvre !
15/04/2011, 13h00
SpaceFrog

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

Code:

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

mais plus pragmatiquement
parents

Code:

quelleLigne = $(this).parents('tr').attr('id');
15/04/2011, 14h08
yann18

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!
21/04/2011, 22h40
FrankOVD

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

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:

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.