Simple premier enfant js?

Recherche d'un détection de premier enfant simple via javascript (pas de cadre).Simple premier enfant js?

Il faut ajouter la classe "first" pour le premier enfant de l'élément. Comme un css-hacks pour ie, mais en javascript et pour un fichier html.

doit travailler similaire à :first-child

Quand je dis pas de cadre, je veux dire un code comme ceci:

<script type="text/javascript">document.documentElement.id = "js"</script>

Par exemple:

<div class="terms"> 
    <dl> 
     <dt>Term 1 name</dt> 
     <dd>Term 1 description</dd> 
    </dl> 
    <dl> 
     <dt>Term 2 name</dt> 
     <dd>Term 2 description</dd> 
    </dl> 
    <dl> 
     <dt>Term 3 name</dt> 
     <dd>Term 3 description</dd> 
    </dl> 
</div>

Trois <dl>, la Le premier inclut le terme 1.

Ce CSS ne fonctionnera pas dans IE6, c'est pourquoi je suis à la recherche d'une solution javascript. CSS-hacks ne sont pas autorisés.

.terms dl:first-child { float: right; }

Source

2010-04-24 Happy

Dans quelles situations ce besoin d'appliquer? Des éléments déjà présents dans le document lors de son chargement? Nouveaux éléments ajoutés dynamiquement? Éléments identifiés par une classe donnée, ou tous les éléments? – harpo

Je pensais avoir compris votre question jusqu'à la dernière phrase. Qu'est-ce que cet extrait Javascript est supposé faire? –

Ajout d'un exemple. – Happy

Cela va faire ce que vous voulez, mais vous avez vraiment besoin d'ajouter un id à la div pour faciliter la trouver.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .terms { } 
     .terms dl.first { float: right; } 
    </style> 
</head> 
<body> 
    <div id="terms" class="terms"> 
     <dl> 
      <dt>Term 1 name</dt> 
      <dd> 
       Term 1 description</dd> 
     </dl> 
     <dl> 
      <dt>Term 2 name</dt> 
      <dd> 
       Term 2 description</dd> 
     </dl> 
     <dl> 
      <dt>Term 3 name</dt> 
      <dd> 
       Term 3 description</dd> 
     </dl> 
    </div> 
</body> 

<script type="text/javascript"> 

    function firstChild(element) { 
     for (var i = 0; i < element.childNodes.length; i++) { 
      var child = element.childNodes[i]; 
      if (child.nodeType == 1) { 
       return child; 
      } 
     } 
    } 
    var terms = document.getElementById("terms"); 

    firstChild(terms).className += " first"; 

</script> 

</html>

Référence:

 
nodeType Constants 

            
  
     ELEMENT_NODE    : 1 
     ATTRIBUTE_NODE    : 2 
     TEXT_NODE     : 3 
     CDATA_SECTION_NODE   : 4 
     ENTITY_REFERENCE_NODE  : 5 
     ENTITY_NODE     : 6 
     PROCESSING_INSTRUCTION_NODE : 7 
     COMMENT_NODE    : 8 
     DOCUMENT_NODE    : 9 
     DOCUMENT_TYPE_NODE   : 10 
     DOCUMENT_FRAGMENT_NODE  : 11 
     NOTATION_NODE    : 12

Source

2010-04-24 16:39:49

Merci Sky Sanders. Y a-t-il un moyen de le raccourcir? – Happy

@glister - pas que je puisse voir. En fait, cet extrait devrait probablement être un peu plus long, y compris les gardes que l'élément passé est, en fait, un élément dom, etc. Dans mon expérience, plus court est fortement surévalué. la clarté du but doit être chéri dans n'importe quel code. –

ok, je vais essayer de l'utiliser un peu plus tard et accepter si fonctionne. Merci encore. – Happy

Simple premier enfant js?

Répondre

Questions connexes