Question

我有一个HTML定义列表，我想使用jQuery将其转换为嵌套的JavaScript数组。最简单的方法是什么？谢谢你的帮助。

我的输入如下：

<dl>
  <dt>A</dt>
   <dd>A1</dd>
  <dt>B</dt>
   <dd>B1</dd>
   <dd>B2</dd>
</dl>

我希望我的输出看起来像这样：

[['A', 'A1'], ['B', 'B1', 'B2']]

Answer 1

var final_array = []; 

$('dl dt').each(function(){
   var dt_dds = [];   /* array to hold the dt_dds */ 
   dt_dds.push( $(this).text() );  /* push the dt */ 
   dds = $(this).nextUntil('dt'); /* get all dd's until the next dt */ 
   dds.each(function(){  dt_dds.push( $(this).text() )}); /** push all dd's into the array*/ 
   final_array.push( dt_dds ); 
})

console.log( final_array );

这是一个fiddle。

Answer 2

您可以尝试这样的事情：

var a = [];
var b = [];

var dlc = $("dl").children();

dlc.each(function (i) {
    if (this.nodeName == "DT") {
       if (b.length) a.push(b);
       b = [$(this).html()]; 
    } else {
       b.push($(this).html());   
    }
    if (i == (dlc.length-1)) {
        a.push(b);
        console.log(a);
    }
});

Answer 3

这不是很优雅但您可以遍历<dl>标记的子元素，为每组<dt> / <dd>标记和{{1}构建一个数组将该数组放入输出数组：

.push

可以在以下网址找到此代码的演示：http://jsfiddle.net/qkjKp/

Answer 4

您可以使用.map()来执行此操作：

var array = $('dl dt').map(function() {
  // Get the ['A1'] and ['B1', 'B2']
   var items = $(this).nextUntil('dt', 'dd').map(function() {
    return $(this).text();
  }).get();

  // Prepend the dt's value
  items.unshift($(this).text());

  // Needs to be wrapped in a second array so that .map() doesn't flatten.
  return [ items ];
}).get();

演示：http://jsfiddle.net/LjZDt/1/

有关该技术的更多信息，请访问：http://encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/

Answer 5

nextUntil(...)可以帮助您获得正确的dd

var result = [];

$("dt").each(function() {
    var el = $(this),
        tmp = [el.text()];

    el.nextUntil("dt").each(function() {
        tmp.push($(this).text());
    });

    result.push(tmp);
});

console.log(result);

fiddle

使用jQuery </dl>将HTML <dl>转换为嵌套的JavaScript数组

5 个答案: