使用jquery將dt/dd列表轉換爲li列表？

我想將dt/dd html格式的產品詳細信息列表轉換爲li？使用jquery將dt/dd列表轉換爲li列表？

例如：

<dt class="float-left"> Composition</dt> 
<dd>Suede 100%</dd> 
<dt class="float-left">Lining Composition</dt> 
<dd>Suede 100%</dd>

到：

<li> Composition: Suede 100%</li> 
<li> Lining Composition: Suede 100%</li>

我試着這樣做多，但不知道從哪裏開始呢？

例小提琴：https://jsfiddle.net/nj0h4ddh/

來源

2015-11-22 solomon.ahmad

什麼是你的方法這麼遠？ – divy3993

這種修改可以通過簡單地重寫源HTML來更好地實現。假設這是不可能的，選擇每個'dt'元素，將它與'next'（'dd'）'一起抓取並附加一個新的'li'元素。 –

你可以使用.wrapInner()/.unwrap()方法：

Updated Example

$('.product-detail-dl').wrapInner('<ul></ul>') 
    .find('ul').unwrap() 
    .find('dt, dd').wrapInner('<li></li>') 
    .find('li').unwrap();

輸入：

<dl class="product-detail-dl"> 
    <dt class="float-left"> Composition</dt> 
    <dd>Suede 100%</dd> 
    <dt class="float-left">Lining Composition</dt> 
    <dd>Suede 100%</dd> 
</dl>

輸出：

<ul> 
    <li>Composition</li> 
    <li>Suede 100%</li> 
    <li>Lining Composition</li> 
    <li>Suede 100%</li> 
</ul>

爲了將dt/dd元素結合起來，你可以使用下面的包裝前/ upwrapping元素：

Updated Example

$('.product-detail-dl dd').each(function() { 
    $(this).prev().append(': ' + this.innerText); 
}).remove();

輸入：

<dl class="product-detail-dl"> 
    <dt class="float-left"> Composition</dt> 
    <dd>Suede 100%</dd> 
    <dt class="float-left">Lining Composition</dt> 
    <dd>Suede 100%</dd> 
    <dt class="float-left">Sole Composition</dt> 
    <dd>Rubber 100%</dd> 
    <dt class="float-left">Brand Style ID</dt> 
    <dd>333824045</dd> 
</dl>

輸出：

<ul> 
    <li>Composition: Suede 100%</li> 
    <li>Lining Composition: Suede 100%</li> 
    <li>Sole Composition: Rubber 100%</li> 
    <li>Brand Style ID: 333824045</li> 
</ul>

作爲一個側面說明，你也可以使用.replaceWith() method了相同的結果：

$('.product-detail-dl dd').each(function() { 
    $(this).prev().append(': ' + this.innerText); 
}).remove(); 

$('.product-detail-dl').find('dt, dd').replaceWith(function() { 
    return $('<li>' + this.innerHTML + '</li>'); 
}); 
$('.product-detail-dl').replaceWith(function() { 
    return $('<ul>' + this.innerHTML + '</ul>'); 
});

來源

2015-11-22 17:32:22

不符合預期輸出 – charlietfl

只是輝煌的...... –

假設有可能不止一個一一對應的關係<dt>至<dd>您可以使用nextUntil()和replaceWith()創建新結構：

var $dl = $('.product-detail-dl'), 
    $ul = $('<ul>'); 
// loop over all the `<dt>` 
$dl.find('dt').each(function() { 
    var $dt = $(this), 
     title = $dt.text(); 
     // loop over following siblings until another `<dt>` is reached 
     $dt.nextUntil('dt').each(function() { 
      $ul.append('<li>' + title + ': ' + $(this).text() + '</li>') 
     }); 
}); 
// replace original list 
$dl.replaceWith($ul)

個

DEMO

參考

來源

2015-11-22 17:51:15 charlietfl

試試這個

https://codepen.io/anon/pen/GpLPvx

<dt class="float-left"> Composition</dt> 
<dd>Suede 100%</dd> 
<dt class="float-left">Lining Composition</dt> 
<dd>Suede 100%</dd>

jQuery的

$('dt').each(function(){ 
    var child = $(this).next('dd'); 
    $(this).replaceWith("<li>" + $(this).html()+' '+ child.html() + "</li>"); 
    child.remove(); 
})

來源

2015-11-22 17:51:57

如果你緩存'$（this）'，性能會更好。 – TheCarver

使用jquery將dt/dd列表轉換爲li列表？

回答

相關問題