2012-09-10 4 views
0

이전 사이트에서 오래된 FAQ 시스템을 추출하고 <dl>으로 다시 코딩하려고합니다.두 개의 jQuery 객체 교체하기

이 지금까지 내 jQuery 코드입니다 : 줄에 TypeError: $content[k].html is not a function

: 나는 오류 얻을

$accordion = $('.accordion'); 
$headers = $accordion.find('h3.trigger-h3-accordion a'); 
$content = $accordion.find('div.toggle-accordion-large'); 

out = "<dl>\n"; 
$headers.each(function(k,v) { 
    out += "<dt>" + $(this).text() + "</dt>\n"; 
    out += "<dd>" + $content[k].html() + "</dd>\n"; 
    // I also tried $content.k.html() and $content{k}.html() 
    // and .text() on all of those options 
}); 
out += "</dl>\n"; 
console.log(out); 

out += "<dd>" + $content[k].html() + "</dd>\n";

<div class="accordion"> 
    <div class="trigger-accordion-large trigger-accordion-active"> 
     <h3 class="trigger-h3-accordion"><a href="#" onclick="return stopAccordionRefresh();">Header Text</a></h3> 
    </div> 
    <div style="display: block;" class="toggle-accordion-large"> 
     <div class="block-large"> 
      <div class="body-content-textarea"> 
       <p>Content Text.</p> 
      </div> 
     </div> 
    </div> 
</div> 

을 어떻게 I 출력 각 $ 콘텐츠의 내용을 루프 내에서 유효한 객체를 만들려면 <dl><dt><dd>?

답변

1

이 시도 : .html() 만의 jQuery 객체로 작업

$($content[k]).html(); 

, 때문에, 당신의 오류에 따라이 $content[k]이의 jQuery 객체가 아닌 것 같다 요소가 될 수 있습니다.

그래서 이것을 $() 내에 배치하면 jQuery 객체가 만들어지고 모든 jQuery 메서드를 사용할 수있게됩니다. $content[k] 만약

는 요소가 다음 사용할 수 있습니다 : $content[k]이 기본 요소가 아닌 jQuery를 객체이기 때문에

$content[k].innerHTML = 'your_all_html'; 
+0

OMG를! 내가 얼마나 바보인지! '$ ($ content [k]) .html(); '을 시도했지만'$ (content [k])'라고 철자가 잘못되었습니다.html();' 이제 작동합니다 : $ ($ content [k]) .html(); ' – atwright147

1

이입니다. thecodeparadox가 암시 하듯이 새로운 jQuery 객체로 포장하거나 $content[k].html (String이 아니라 Function)을 사용할 수 있습니다.

[]의 문서

은 여기에 있습니다 : http://api.jquery.com/get/

.get()는 jQuery 오브젝트의 모든 DOM 요소의 기본 배열을 반환합니다.
.get(n)은 0부터 시작하는 n 번째 요소를 반환합니다.
.get(-n)은 1부터 시작하는 n 번째 마지막 요소를 반환합니다.

:
[n]는 n 번째 요소
.length 포함한다는 점에서 어레이 등
jQuery 오브젝트 작용 원시 DOM 요소의 문서는 여기에서 찾을 수

요소의 수를 포함

http://www.w3schools.com/jsref/dom_obj_all.asp http://www.javascriptkit.com/domref/elementproperties.shtml

+0

흥미 롭습니다. 나는이 옵션을 몰랐다. jQuery 사이트의 어딘가에 문서가 있습니까? (검색은 .html()에 대한 정보 만 반환합니다.) – atwright147

2

배열 색인화를 사용하여 jQuery 객체의 요소에 액세스하면 jQuery 객체가 아닌 기본 DOM 요소가 반환됩니다. 요소의 jQuery를 참조에 액세스하는 대신 .eq() 방법을 사용하십시오

out += "<dd>" + $content.eq(k).html() + "</dd>\n"; 
+0

Ooooh, 나는 잊어 버렸습니다 .eq() - 매우 멋졌습니다. – atwright147

2

내가 변환을 처리 할 것 jQuery를 대신하는 HTML 문자열의 개체를 만들어 :

var $accordion = $('.accordion'), 
    $headers = $('h3.trigger-h3-accordion a', $accordion), 
    $content = $('div.toggle-accordion-large', $accordion), 
    $out = $('<dl/>') 
    $dt = $('<dt/>'), 
    $dd = $('<dd/>'); 

$headers.each(function(k,v) { 
    var contents = $($content[k]).html(); 
    $dt.clone().html(v.innerHTML).appendTo($out); 
    $dd.clone().html(contents).appendTo($out); 
}); 

console.log(out); 
+0

와우, 그 멋진 솔루션입니다! – atwright147

관련 문제