Question

我正在尝试从旧网站中提取旧的常见问题解答系统，并将其重新编码为<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对象。您可以将其包装在新的jQuery对象中，如codeparadox建议的那样，或者使用$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

交替使用两个jQuery对象

4 个答案: