jQuery Html Manipulation Frage

Question

Ich habe die folgende HTML-Struktur von einer AJAX-Anforderung zurückgegeben werden ...

<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> 

Und ich will diese manipulieren, so dass das Endergebnis ist ...

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

Ich möchte im Grunde die Inline-Stile entfernen und den Text aus dem Hyperlink extrahieren. Wie kann ich das einfach mit jQuery machen?

Answer 1

Unter der Annahme, $data wird die analysierte DOM-Struktur oben ...

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

Answer 2

Es scheint, wie der einfachste Ansatz wäre, den Text zu markieren und dann die neuen TH-Elemente erstellen verwenden, die leicht getan werden können, in jQuery. in einer Variablen namens Daten Ihre Daten Angenommen, Sie so etwas wie tun wollen würde:

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 
}); 

Die Newth Variable jetzt ein Stück HTML sein würde, die Sie jQuery in die Tabelle des anhängen nutzen könnten.

Ich würde empfehlen, es zuerst als String aufzubauen, einfach aus Gründen der Geschwindigkeit. Das Bearbeiten und Ändern der DOM-Elemente funktioniert, aber abhängig davon, wie viele THs Sie bekommen, sollte dies theoretisch etwas schneller sein.