jQuery를 html로 조작 질문

나는 다음과 같은 HTML 구조가 AJAX 요청에서 반환 한 ...jQuery를 html로 조작 질문

<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를 사용하면 어떻게 쉽게이 작업을 수행 할 수 있습니까?

출처

2009-06-29 Josh Stodola

... $data을 위의 구문 분석 DOM 구조가되어 가정

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

출처

2009-06-29 16:59:21

그보다 훨씬 쉽지는 않습니다 !! 환상적입니다, 고마워요. –

추가 할 것은 한 가지입니다. 가치가있는 것을 변수로 설정할 필요가 없었습니다. 나는 var : tbl = $ (xhr.responseText)와 같은 코드를 사용했다.이 코드는 tbl.find ('th')와 같이 호출해야했다. }}) 나중에 요소에 tbl을 추가하면 멋지게 작동합니다. –

흠. 나는 항상 모든 내부 방법이 불변이라고 가정했다 (따라서 "연결"패러다임). –

텍스트를 선택하고 쉽게 할 수있는 새로운 TH 요소를 만들 것을 사용하는 것이 가장 쉬운 방법처럼 보인다 jQuery에서.

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 변수가 이제 테이블의에 추가 할 jQuery를 사용할 수있는 HTML의 덩어리가 될 것입니다 : 데이터를 가정하면라는 변수 데이터에서, 당신이 그런 짓을 할 것입니다.

저는 먼저 문자열로 작성하는 것이 좋습니다. 간단히 말하자면 간단합니다. DOM 요소 조작 및 변경은 작동하지만 TH 수에 따라 이론적으로는 조금 빨라야합니다.

출처

2009-06-29 17:03:52

속도가 적절할 수있는 유일한 상황 인 대용량 데이터 세트를 실제로 추가하는 것과 같이 문자열을 추가하면 충격을받을 수 있습니다. –

나는 정보를 http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly에서 가져 왔으며, 오히려 신뢰할 만하고 반복적 인 것으로 보인다. :) 또한 속도는이 경우 완전히 관련이 없을 수도 있지만 결코 처음부터 올바르게 수행하는 것이 좋습니다. :) –

첫 번째 예가 해당 페이지에서 느린 이유는 각 반복에서 추가 작업을 호출하기 때문입니다.이 작업은 옳은 일이 아닙니다. 제 예제는이 작업을 수행하지 않았습니다. 다음으로 볼 수 있듯이, 문자열이 이것에 가장 좋지 않다고 말하면서 더 나아가 배열 대신 배열에 넣고 끝에 한 번 추가하는 것이 가장 좋습니다. 이 상황에서는 더 비싼 요소를 만드는 대신 이미 존재하는 것을 수정하기 때문에 중요하지 않습니다. –

jQuery를 html로 조작 질문

답변

관련 문제