Alternating two jQuery objects

Question

I am trying to extract an old FAQ system from my old site and recode it into a <dl>.

This is my jQuery code so far:

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

I get the error: TypeError: $content[k].html is not a function

On line: 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>

How can I output the content of each $content object within the loop to create the valid <dl><dt><dd> I am after?

Answer 1

Try this:

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

Because, .html() only work with jQuery object, according to your error it seems $content[k] is not an jQuery object, may be an element.

So, wrapping it within $() will make it a jQuery object and then you can able to use any jQuery method to it.

If $content[k] is an element then you can use:

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

Answer 2

Accessing elements of the jQuery object using array indexing returns the underlying DOM element, not a jQuery object; to access the jQuery reference for the element, use the .eq() method instead:

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

Answer 3

I'd handle the conversion by making jQuery objects instead of an HTML-String:

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

Answer 4

This is because $content[k] is the native element, not a jQuery object. You could either wrap it in a new jQuery object, as thecodeparadox suggests, or use $content[k].html (String, not Function).

the documentation of [] is here: http://api.jquery.com/get/

.get() returns the native array of all dom elements in the jQuery object.
.get(n) returns the n'th element, zero-based.
.get(-n) returns the n-th last element, one-based.
The jQuery object acts like an array in the sense that
[n] contains the n'th element
.length contains the number of elements

a documentation of the native dom element can be found here:

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