JQuery Html вопрос манипуляции

Question

У меня следующая HTML-структура, возвращаемая из запроса 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>

И я хочу манипулировать этим, чтобы конечный результат был ...

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

Я хочу удалить встроенные стили и извлечь текст из гиперссылки. Как я могу сделать это легко с JQuery?

Answer 1

Предполагается, что $data - это проанализированная структура DOM выше ...

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

Answer 2

Кажется, что самым простым подходом было бы выделить текст, а затем использовать его для создания новых элементов TH, что легко сделать в jQuery. Предполагая, что ваши данные находятся в переменной с именем data, вам нужно сделать что-то вроде:

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

Переменная newTH теперь будет частью HTML, которую вы можете использовать jQuery для добавления в таблицу.

Я бы посоветовал сначала создать его как строку, просто ради скорости. Манипулирование и изменение элементов DOM работает, но в зависимости от того, сколько вы получите TH, теоретически это должно быть немного быстрее.