Question

这篇文章有很多帮助，但我仍然遇到无法解决的问题。 Convert Content inside div to UL li

我需要转换此代码

<span class="pagination" id="pagination">
  <a href="#" title="1">1</a>
  " 2 "
  <a href="#" title="3">3</a>
  <a href="#" title="4">4</a>
</span>

进入这个

<ul class="pagination" id="pagination">
  <li><a href="#" title="1">1</a></li>
  <li>2</li>
  <li><a href="#" title="3">3</a></li>
  <li><a href="#" title="4">4</a></li>
</ul>

我对脚本进行了一些更改，但我对＆＃34; 2＆＃34;有疑问。

$(".pagination").contents()  // wraps quotation marks as elements
$(".pagination").children()  // misses " 2 "

var $ul = $("<ul class='pagination' id='pagination'>");  //added to keep class and id
$(".pagination").contents().each(function(){             
    var $li = $("<li>").append($(this));
    $ul.append($li);
});
$(".pagination").replaceWith($ul);                       //replaced span with ul

感谢和抱歉我自己无法解决这个问题

Answer 1

我找到了解决方案的小提琴：http://jsfiddle.net/7x2m89z0/

var pagination = $(".pagination");
pagination.contents().each(function() {
    if ($(this).text().trim()) {
        $(this).wrap('<li>');        
    }
});
pagination.replaceWith($('<ul>' + pagination.html() + '</ul>'));

这里，查看每个元素。如果它是空的，它将被忽略，否则它将被放入<li>。最后一行来自Tambo。

Answer 2

您可以查看nodeType和nodeValue的长度。

var $ul = $("<ul class='pagination' id='pagination'>");  $(".pagination").contents().each(function() {   
    var $li;
    if (this.nodeType === 3 && this.nodeValue.trim().length > 0) {
        var txt = this.nodeValue.replace(/"/g, '');
        $li = $("<li>").append(txt);
    }
    if (this.nodeType === 1) {
        $li = $("<li>").append($(this));
    }
    $ul.append($li);
});
$(".pagination").replaceWith($ul);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="pagination" id="pagination">
  <a href="#" title="1">1</a>
  " 2 "
  <a href="#" title="3">3</a>
  <a href="#" title="4">4</a>
</span>

Answer 3

试试这个

var pagination = $(".pagination");
pagination.find("a").wrap("<li></li>");
pagination.replaceWith($('<ul>' + pagination.html() + '</ul>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="pagination" id="pagination">
  <a href="#" title="1">1</a>
  " 2 "
  <a href="#" title="3">3</a>
  <a href="#" title="4">4</a>
</span>

将div转换为ul并将div内容转换为li后，jquery缺少行

3 个答案: