2010-04-15 8 views
4

je la structure HTML suivant:Wrap HTML avec DIV jusqu'à la prochaine H3

<div id="subgroup"> 
    <h3>Group name #1</h3> 
    <a href="#">Link #1</a> 
    <a href="#">Link #2</a> 
    <h3>Group name #2</h3> 
    <a href="#">Link #3</a> 
    <a href="#">Link #4</a> 
</div> 

J'ai cette structure plate parce que je veux utiliser l'effet d'accordéon de jQuery UI. Je veux envelopper tous les éléments a entre les éléments h3.

J'ai essayé ce qui suit, sans chance:

$('#subgroup a').nextUntil('h3').wrapAll('<div></div>'); 

Mais cela a causé quelques-uns des éléments a Disparaître. J'ai essayé pas mal de sélecteurs mais aucun n'a fonctionné. Est-ce que je fais ça bien?

+2

Pourquoi ne pas fixer le balisage d'origine (au lieu d'avoir le navigateur de l'utilisateur faire à chaque chargement de la page)? – Quentin

+0

Le problème est le CMS qui délivre le HTML de merde. Je le ferais si je pouvais! –

Répondre

7

Une approche comme cela devrait fonctionner, mais je suppose qu'il existe de nombreuses façons de le faire:

$('#subgroup h3').each(function() { 
    $(this).nextUntil('h3').wrapAll('<div></div>'); 
}); 
+0

Cela n'a pas fonctionné, (ouais j'ai ajouté '

' dans 'wrapAall()'. Je vais essayer d'expérimenter avec cette solution –

+0

Désolé, j'ai rapidement vérifié que cela a fonctionné pour moi en ajoutant '

' et puis a pris trop beaucoup de choses quand j'ai posté ma réponse! De quelle façon ça ne marche pas? À quoi ressemble le HTML dans Firebug après que le jQuery a été exécuté? –

+0

Vérifiez ma réponse ci-dessous –

0

C'est à quoi il ressemble après une belle (et sale) jQuerying, à ranger HTML:

<div id="subgr-productlist"> 

    <h3>Serie 1000</h3> 
    <a id="product-PROD79" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD79" name="product-PROD79">Model 1010</a> 
    <a id="product-PROD80" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD80" name="product-PROD80">Model 1020</a> 
    <a id="product-PROD81" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD81" name="product-PROD81">Model 1030</a> 
    <a id="product-PROD82" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD82" name="product-PROD82">Model 1040</a> 
    <a id="product-PROD83" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD83" name="product-PROD83">Model 1050</a> 

    <h3>Serie 2000</h3> 
    <a id="product-PROD234" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD234" name="product-PROD234">Model 2010</a> 

    <h3>Serie 3000</h3> 
    <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD85" name="product-PROD85">Model 3010</a> 

    <h3>Serie 4000</h3> 
    <a id="product-PROD86" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD86" name="product-PROD86">Model 4010</a> 
    <a id="product-PROD87" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD87" name="product-PROD87">Model 4020</a> 
    <a id="product-PROD88" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD88" name="product-PROD88">Model 4030</a> 
    <a id="product-PROD89" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD89" name="product-PROD89">Model 4040</a> 

</div> 

En d'autres termes, tous les autres éléments a disparaissent?

Ensuite, je lance ce script jQuery:

$('#subgr-productlist h3').each(function(){ 
    $(this).nextUntil('h3').wrapAll('<div class="test"></div>'); 
}); 

Mais que les résultats dans le #subgr-productlist div rendre comme ceci:

<div id="subgr-productlist"> 
    <h3>Serie 1000</h3> 
    <h3>Serie 2000</h3> 
    <h3>Serie 3000</h3> 
    <div class="test"> 
     <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products/products.aspx?ProductId=%20Model%203010" name="product-PROD85"></a> 
    </div> 
    <h3>Serie 4000</h3> 
</div> 
+0

Bizarre Je viens de passer votre code sur votre HTML et j'ai obtenu le bon résultat. wrapAll() ne devrait jamais supprimer quoi que ce soit, et c'est la seule fonction active en cours d'exécution Je pense que quelque chose de subtil ou d'étrange se passe quelque part. Avez-vous un javascript supplémentaire en cours d'exécution? Pouvez-vous reproduire le problème sur une simple page Web avec juste le html et jQuery que vous avez posté? –

+0

Hmm, je l'ai juste fait fonctionner moi-même, et je n'ai aucune idée pourquoi ça ne marcherait pas plus tôt. Vider le cache, plusieurs navigateurs, etc. ne fonctionnait pas, mais tout d'un coup ça a marché ... j'ai dû oublier quelque chose. Merci beaucoup Matt! : D –

+0

Pas de problème! Parfois, vous avez juste besoin d'un contrôle de santé mentale :) J'espère que cela continue de fonctionner pour vous. –