jquery children ermitteln

[musclebreast]

Hallo,

irgendwie komme ich heute wieder mal nicht drauf, obwohl es nicht hart sein sollte:) Ich habe eine Tabelle mit mehrere Zeilen und in den Spalten ist jeweils ein Select und ein Input-Feld:

<tr id="test">
<td>
<select name="Connector_ObjName_2">
<option>OR</option>
<option>AND</option>
<option>NOT</option>
</select>
</td>

<td>
<p class="text">Name:&nbsp;</p>
</td>

<td>
<input type="TEXT" size="70" value="" name="ObjName_2" class="valueEditable" title="">
</td>
<td>
<a href="javascript:BrowseLivelinkDuplicate()">
<img width="16" height="16" border="0" alt="Duplicate" src="/img/websbroker/add_row.gif"></a>
<a href="javascript:FullTextRemove(2)">
<img width="16" height="16" border="0" alt="Remove" src="/img/websbroker/delete_row.gif"></a>
</td>
</tr>

<tr id="test">
<td>
<select name="Connector_ObjName_3">
<option>OR</option>
<option>AND</option>
<option>NOT</option>
</select>
</td>

<td>
<p class="text">Name:&nbsp;</p>
</td>

<td>
<input type="TEXT" size="70" value="" name="ObjName_3" class="valueEditable" title="">
</td>
<td>
<a href="javascript:BrowseLivelinkDuplicate()">
<img width="16" height="16" border="0" alt="Duplicate" src="/img/websbroker/add_row.gif"></a>
<a href="javascript:FullTextRemove(3)">
<img width="16" height="16" border="0" alt="Remove" src="/img/websbroker/delete_row.gif"></a>
</td>
</tr>

ich würde ganz gerne den Namen des select-Feldes bzw. des Input Feldes ermitteln, ABER nur von der jeweiligen Zeile. Ich habe erst einmal versucht mit length zu testen:

alert($("#table tr[id].eq(1) :selected").length);


alert($("#table tr[id].eq(1) :input").length);

ohne eq(1) funktioniert es aber es werden mir alle select und input Felder angezeigt. Eine Notlösung ist natürlich den select feldern und select feldern ID's zu geben, aber ich würde gerne über die location Zeile suchen.

2. aktuell suche ich alle Zeilen, welche eine ID haben. Wie kann ich nach allen Zeilen suchen mit der ID "test"?

LG und vielen Dank,

Lara

 

[Tronjer]

IDs dürfen pro Seite nur einmal vergeben werden. Nimm statt dessen Klassen:

$('table tr').hasClass('test');

 

[musclebreast]

Hi,

du hast natürlich recht. Klassen zu verwenden ist viel sauberer. Habe das jetzt angepasst.

<Table class="table">

[COLOR=#008080]<tr class=[COLOR=#0000FF]"test"[/COLOR]>[/COLOR] [COLOR=#008080]<td>[/COLOR] [COLOR=#FF8000]<select name=[COLOR=#0000FF]"Connector_ObjName_2"[/COLOR]>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]OR[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]AND[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]NOT[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]</select>[/COLOR] [COLOR=#008080]</td>[/COLOR]  [COLOR=#008080]<td>[/COLOR] [COLOR=#000080]<p class=[COLOR=#0000FF]"text"[/COLOR]>[/COLOR]Name:[B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR] [COLOR=#008080]</td>[/COLOR]  [COLOR=#008080]<td>[/COLOR] [COLOR=#FF8000]<input type=[COLOR=#0000FF]"TEXT"[/COLOR] size=[COLOR=#0000FF]"70"[/COLOR] value=[COLOR=#0000FF]""[/COLOR] name=[COLOR=#0000FF]"ObjName_2"[/COLOR] class=[COLOR=#0000FF]"valueEditable"[/COLOR] title=[COLOR=#0000FF]""[/COLOR]>[/COLOR] [COLOR=#008080]</td>[/COLOR] [COLOR=#008080]<td>[/COLOR] [COLOR=#008000]<a href=[COLOR=#0000FF]"javascript:BrowseLivelinkDuplicate()"[/COLOR]>[/COLOR] [COLOR=#800080]<img width=[COLOR=#0000FF]"16"[/COLOR] height=[COLOR=#0000FF]"16"[/COLOR] border=[COLOR=#0000FF]"0"[/COLOR] alt=[COLOR=#0000FF]"Duplicate"[/COLOR] src=[COLOR=#0000FF]"/img/websbroker/add_row.gif"[/COLOR]>[/COLOR][COLOR=#008000]</a>[/COLOR] [COLOR=#008000]<a href=[COLOR=#0000FF]"javascript:FullTextRemove(2)"[/COLOR]>[/COLOR] [COLOR=#800080]<img width=[COLOR=#0000FF]"16"[/COLOR] height=[COLOR=#0000FF]"16"[/COLOR] border=[COLOR=#0000FF]"0"[/COLOR] alt=[COLOR=#0000FF]"Remove"[/COLOR] src=[COLOR=#0000FF]"/img/websbroker/delete_row.gif"[/COLOR]>[/COLOR][COLOR=#008000]</a>[/COLOR] [COLOR=#008080]</td>[/COLOR] [COLOR=#008080]</tr>[/COLOR]  [COLOR=#008080]<tr class=[COLOR=#0000FF]"test"[/COLOR]>[/COLOR] [COLOR=#008080]<td>[/COLOR] [COLOR=#FF8000]<select name=[COLOR=#0000FF]"Connector_ObjName_3"[/COLOR]>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]OR[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]AND[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]<option>[/COLOR]NOT[COLOR=#FF8000]</option>[/COLOR] [COLOR=#FF8000]</select>[/COLOR] [COLOR=#008080]</td>[/COLOR]  [COLOR=#008080]<td>[/COLOR] [COLOR=#000080]<p class=[COLOR=#0000FF]"text"[/COLOR]>[/COLOR]Name:[B][I]&nbsp;[/I][/B][COLOR=#000080]</p>[/COLOR] [COLOR=#008080]</td>[/COLOR]  [COLOR=#008080]<td>[/COLOR] [COLOR=#FF8000]<input type=[COLOR=#0000FF]"TEXT"[/COLOR] size=[COLOR=#0000FF]"70"[/COLOR] value=[COLOR=#0000FF]""[/COLOR] name=[COLOR=#0000FF]"ObjName_3"[/COLOR] class=[COLOR=#0000FF]"valueEditable"[/COLOR] title=[COLOR=#0000FF]""[/COLOR]>[/COLOR] [COLOR=#008080]</td>[/COLOR] [COLOR=#008080]<td>[/COLOR] [COLOR=#008000]<a href=[COLOR=#0000FF]"javascript:BrowseLivelinkDuplicate()"[/COLOR]>[/COLOR] [COLOR=#800080]<img width=[COLOR=#0000FF]"16"[/COLOR] height=[COLOR=#0000FF]"16"[/COLOR] border=[COLOR=#0000FF]"0"[/COLOR] alt=[COLOR=#0000FF]"Duplicate"[/COLOR] src=[COLOR=#0000FF]"/img/websbroker/add_row.gif"[/COLOR]>[/COLOR][COLOR=#008000]</a>[/COLOR] [COLOR=#008000]<a href=[COLOR=#0000FF]"javascript:FullTextRemove(3)"[/COLOR]>[/COLOR] [COLOR=#800080]<img width=[COLOR=#0000FF]"16"[/COLOR] height=[COLOR=#0000FF]"16"[/COLOR] border=[COLOR=#0000FF]"0"[/COLOR] alt=[COLOR=#0000FF]"Remove"[/COLOR] src=[COLOR=#0000FF]"/img/websbroker/delete_row.gif"[/COLOR]>[/COLOR][COLOR=#008000]</a>[/COLOR] [COLOR=#008080]</td>[/COLOR] [COLOR=#008080]</tr>[/COLOR]
</table>

Ich habe jetzt aber immer noch das Problem auf die Input felder zuzugreifen. Eine Frage noch zu der hasclass-Funktion....die liefert ja einen Boolean Wert zurück. Kann ich somit noch Funktionne an die Funktion anhängen? Siehe Beispiel da unten. Die Funktion eq wird in dem Kontext nicht erkannt....

$(".table tr").hasClass('test').eq(c-1).remove();

$(".table tr[class].eq(1)").length;

Wie kann ich das lösen bzw. könnt ihr mir da Klarheit bringen? Wenn das zu kompliziert ist dann gebe ich jedem Elemement eine Klasse...ich versuche mich so durch klassen zu navigieren:

alert($(".table .test").prop("tagName"));


aber das funktioniert auch nicht...es scheint nicht so einfach...zumindest für mich:)

LG,,


Lara

 

[Tronjer]

$(selector).hasClass(class).eq(1) sollte das zweite Element (Nullindizierung beachten!) mit der entsprechenden Klasse zurückliefern und ein .eq(c - 1) eine Fehlermeldung ergeben, sofern du keine Variable c deklariert hast.

Schlüsselwörter in jQuery lassen sich oftmals, aber eben nicht immer chainen. Ich hatte vergangene Woche mit einer älteren Version so etwas wie $(selector).next().not('.class') versucht und das funktionierte nicht. Manchmal ist auch trial & error angesagt und man gelangt nur auf Umwegen zum Ziel. Um das grundlegende Prinzip zu verstehen, solltest du wissen, wie man im DOM traversiert und was in JavaScript Parents, Children und Siblings sind, respektive deren korrespondierende Funktionen in jQuery kennen. Alternativ dazu lassen sich Selektoren auch über IDs, Klassen, Namen, Typen, Attribute, etc., direkt anspringen.

Ich weiß nicht, wonach du hier eigentlich suchst, aber wenn es um ein Input-Element geht, könntest du auch so etwas wie $(target).is(:'input') versuchen.

 

[musclebreast]

Hallo,

danke für die Hilfe....du hast recht...man muss einfach probieren und probieren...es ist komisch..manchmal kann man noch eine Funktion anhängen und manchmal nicht mehr...aber danke dir:)

LG,

Lara