交替两个jQuery对象

Question

我正在尝试从旧站点中提取旧的FAQ系统并将其重新编码为<dl> 。

到目前为止，这是我的jQuery代码：

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

我收到错误： TypeError: $content[k].html is not a function

在线： 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>

如何在循环中输出每个$ content对象的内容以创建有效的<dl><dt><dd> ？

Answer 1

使用数组索引访问jQuery对象的元素将返回底层的DOM元素，而不是jQuery对象； 要访问元素的jQuery参考，请改用.eq()方法：

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

Answer 2

我将通过制作jQuery对象而不是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 3

尝试这个：

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

因为.html()仅适用于jQuery对象，根据您的错误，似乎$content[k]不是jQuery对象，可能是一个元素。

因此，将其包装在$()中将使其成为jQuery对象，然后您可以对其使用任何jQuery方法。

如果$content[k]是一个元素，则可以使用：

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

Answer 4

这是因为$content[k]是本机元素，而不是jQuery对象。 您可以按照thecodeparadox的建议将其包装在新的jQuery对象中，也可以使用$content[k].html （ String ，不是Function ）。

[]的文档在这里： http : //api.jquery.com/get/

.get()返回jQuery对象中所有dom元素的本机数组。
.get(n)返回从零开始的第n个元素。
.get(-n)返回第n个基于一个元素的元素。
jQuery对象在某种意义上就像一个数组
[n]包含第n个元素
.length包含元素数

本地dom元素的文档可以在这里找到：

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