# [jQuery] Dynamisch generierte ID ein/ausblenden



## sonicks (9. April 2010)

Hallo

Ich gebe mir mittels PHP und einer While Schleife eine Liste von Mitgliedern aus, wo anfangs nur der Name angezeigt werden soll, und wenn man darauf klickt per jQuery darunter noch eine Tabellenzeiler eingeblendet wird, die dann die zugehörigen Details enthält. Diese werden standardmäßig per css auf display:none gesetzt und dann per jQuery geändert:


```
<script>
	$(document).ready(function(){
							   
		$("#list_head").toggle(
		  function () {
			$('#list_details').css('display', 'block');
		  },
		  function () {
			$('#list_details').css('display', 'none');
		  }
		);
		
	 });
</script>
```


```
echo '<table>
	      <thead>
    		   <tr>
			<th>Name</th>
			<th>Vorname</th>
		  </tr>
	    </thead>';

while($data = mysql_fetch_array($res, MYSQL_ASSOC)) {
						
	echo '<tr>
         		<td><a id="list_head">'.$data["name"].'</a></td>
			<td>'.$data["vorname"].'</td>
		 </tr>
		 <tr id="list_details">
	        	<td colspan="3">
				<div>
					Details
				</div>
			</td>
		</tr>';
}
echo '</table>';
```

Jetzt habe ich das Problem dass die id ja nur einmalig sein darf und das Script bei Klick nur auf den ersten Eintrag reagiert. Wie kann ich da jetzt für jede Ausgabe eine einmalige ID ausgeben und diese dann per jQuery auch korrekt ansprechen?

Grüße


----------



## Sven Mintel (9. April 2010)

Moin,

verzichte auf IDs und gebe dem #list_head stattdessen die class "list_head" ...das reicht aus.

Die Zuweisung der Funktion kannst du dann so vornehmen:


```
$(document).ready(function(){						   
		$(".list_head").click(
		  function () {$(this).parent().parent().next().toggle();}
		);	
});
```


----------



## sonicks (9. April 2010)

Hi

Danke! Funktioniert einwandfrei. In die ganze this - Geschichte muss ich mich mal noch einlesen.

Noch eine kurze Frage:

Wieso macht er das nicht, wenn ich der <tr> mit dem Namen drin die class="list_head" gebe ohne ein Link. Also quasi das wenn man auf die komplette Zeile klickt, sollen die Details ausgefahren werden.


----------



## Sven Mintel (9. April 2010)

Das hängt mit dem this zusammen.

this ist das auslösende Element, also bisher das <a>
Die Details sind von dort ansprechbar per 

```
parent().//Eltern-TD
parent().//Eltern-TR
next()//nächster Knoten
```

wenn du das nun auf die <tr> anwendest, muss die Anweisung nur noch lauten:


```
$(this).next().toggle();
```


----------

