Question

我想将产品详细信息列表从dt / dd html格式转换为li？

例如：

(defun matrix-add-row (r1 r2 sum-row)
  (if (or (endp r1) (endp r2))
      (reverse sum-row)
      (matrix-add-row (cdr r1)
                      (cdr r2)
                      (cons (+ (car r1) (car r2))
                            sum-row))))

(matrix-add-row '(1 2) '(3 4) ())
;; => (4 6)

成：

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

我试过这么多，但不知道从哪里开始？

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

Answer 1

您可以使用.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元素，您可以在包装/上传元素之前使用以下内容：

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

Answer 2

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

参考

nextUntil()

replaceWith()

Answer 3

试试这个

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

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

3 个答案: