使用jquery将dt/dd列表转换为li列表

Convert dt/dd list into a li list using jquery?

本文关键字：列表 转换 li dd jquery dt 使用      更新时间：2023-09-26

我想将产品详细信息列表从dt/dd html格式转换为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/

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

更新示例

$('.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元素，您可以在包裹/向上包裹元素之前使用以下内容：

更新示例

$('.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()方法来获得相同的结果：

$('.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>');
});

假设<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)

演示

参考

  • next直到（）
  • 替换为（）

试试这个

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();
})
相关文章：