Ajout d'une classe CSS à une ligne de table après le chargement d'une page dans un iframe avec jQuery?

Question

Je charge un formulaire dans un iframe (avec facebox). Lorsque le formulaire est soumis et la page à l'intérieur de l'iframe est rechargée, je voudrais ajouter une classe CSS à une ligne de table spécifique sur la page parente.

la table ressemble à ceci:

<table> 
    <tr id="row-1"><td><a href="">link to open facebox with iframe</a></td></tr> 
    <tr id="row-2"><td></td></tr> 
    <tr id="row-3"><td></td></tr> 
    <tr id="row-4"><td></td></tr> 
</table> 

Une fois le formulaire soumis dans le iframe, la table dans le cadre parent devrait ressembler à ceci:

<table> 
    <tr id="row-1" **class="highlite"**> 
     <td><a href="">link to open facebox with iframe</a></td> 
    </tr> 
    <tr id="row-2"><td></td></tr> 
    <tr id="row-3"><td></td></tr> 
    <tr id="row-4"><td></td></tr> 
</table> 

peut me aider la communauté à mettre en œuvre correctement?

Answer 1

$("#row-1", window.parent.document).toggleClass("highlite"); 

Pour citer Pim Jager:

Le second paramètre pour l'emballage $() est le contexte dans lequel la recherche. Ceci est par défaut pour documenter.

Answer 2

Vous pouvez utiliser .addClass au lieu de .toggleClass s'il y a une chance que le même lien peut être cliqué et chargé à nouveau. Le comportement par défaut de .toggleClass consiste à vérifier l'existence de la classe sur cet élément, puis à l'ajouter ou à le supprimer en fonction des résultats.

Si votre intention est d'avoir seulement la ligne actuelle en surbrillance, vous voulez faire quelque chose comme:

$("#row-1", window.parent.document).addClass("highlite") 
    .siblings().removeClass("highlite");