使用jQuery將HTML <dl>轉換成嵌套JavaScript數組

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>標籤和.push數組的數組到一個輸出數組：

//setup two arrays, one as a final output and one that will hold each sub-array 
var output = [], 
    temp = []; 

//iterate through each child element of the `<dl>` element 
$('dl').children().each(function() { 

    //if this element is a `<dt>` tag 
    if (this.tagName == 'DT') { 

     //if the `temp` array is not empty 
     if (0 in temp) { 

      //`.push` the `temp` array onto the `output` array 
      output.push(temp); 
     } 

     //add the text of this `<dt>` tag to the `temp` array as the first key (erasing any data that was inside the `temp` array) 
     temp = [$(this).text()]; 
    } else { 

     //if the tag found was anything other than a `<dt>` tag (I'm assuming it's a `<dd>` tag) then `.push` its text into the `temp` array 
     temp.push($(this).text()); 
    } 
}); 

//make sure to add the last iteration of the `temp` array to the `output` array 
output.push(temp); 

//for the structure supplied in the question, the output looks like this: [["A", "A1"], ["B", "B1", "B2"]] 

這段代碼的演示，可以發現：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