jQuery Html Manipulation Question

Question

J'ai la structure HTML suivant d'être renvoyé d'une requête AJAX ...

<th scope="col" style="yada,yada,yada"> 
<a href="javascript:funcName();" style="yada,yada,yada"> 
Test<br />Heading</a></th> 
<th scope="col" style="yada,yada,yada"> 
<a href="javascript:funcName2();" style="yada,yada,yada"> 
Test<br />Heading2</a></th> 

Et je veux manipuler ceci de sorte que le résultat final est ...

<th>Test<br />Heading</th> 
<th>Test<br />Heading2</th> 

Je veux essentiellement supprimer les styles en ligne, et extraire le texte de l'hyperlien. Comment puis-je le faire facilement avec jQuery?

Answer 1

En supposant $data est la structure DOM ci-dessus ... analysable

$data.find('th').each(function() { 
    $(this).removeAttr('scope').removeAttr('style').html(
     $(this).find('a').html() 
    ); 
}).appendTo(selector); 

Answer 2

Il semble que l'approche la plus simple serait de choisir le texte et l'utiliser ensuite pour créer de nouveaux éléments de TH, qui peut facilement être fait en jQuery. En supposant que vos données sont dans une donnée variable nommée, vous voulez faire quelque chose comme:

var newTH = ''; // To store as you go 
$("th a", data).each(function(){ // Loop over all anchors in THs 
    newTH += "<th>" + $(this).html() + "</th>"; // Pull out the innerHTML of the anchor, wrap in TH 
}); 

La variable NEWTH serait maintenant un morceau de code HTML que vous pouvez utiliser jQuery pour ajouter dans votre table de.

Je conseillerais de le constituer comme une ficelle d'abord, simplement pour la vitesse. Manipuler et modifier les éléments DOM fonctionne, mais en fonction du nombre de TH que vous obtenez, cela devrait théoriquement être un peu plus rapide.