Insert dynamically created list items in <ol> with jqu

Insert dynamically created list items in <ol> with jquery

本文关键字：ol gt with jqu dynamically lt list items in Insert created      更新时间：2024-02-10

我正试图想出一个脚本，该脚本定位具有class=SO-Para-Numbered-List的段落，取出span元素，将该段落转换为li，然后创建ol并添加其中的所有列表项。

这是HTML结构

<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        <p class="SO-Para-Numbered-List"><span>i</span> some text </p>
        <p class="SO-Para-Numbered-List"><span>ii</span> some text</p>
        <p class="SO-Para-Numbered-List"><span>iii</span> some text </p>
        <p class="SO-Para-Numbered-List"><span>iv</span> some text</p>
        <p class="SO-Para-Numbered-List"><span>v</span> some text</p>
        <p class="SO-Para-Numbered-List"><span>vi</span>  some text</p>
        <p class="SO-Para-Numbered-List"><span>vii</span> some text </p>
<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

和jquery脚本

$(document).ready(function(){
    //create ol
    $(".SO-Para-Numbered-List").first().before("<ol class='newList'>");
    //for each para item
    $(".SO-Para-Numbered-List").each(function(){
        //remove span
        $(this).find("span").remove();
        //save the text
        var thisContent = $(this).text();
        //replace p with li
        var newText = $(this).replaceWith("<li style='list-style-type:lower-roman;' class='SOlistItem'>"+thisContent+"</li>");
        //add items to list
        $("ol.newList").add(newText);
    });
});

我想我要找的应该像这个

<ol>       
    <li style="list-style-type:lower-roman;" class="SOlistItem"> some text </li>        
    <li style="list-style-type:lower-roman;" class="SOlistItem"> some text </li>
    <li style="list-style-type:lower-roman;" class="SOlistItem"> some text </li>
    <li style="list-style-type:lower-roman;" class="SOlistItem"> some text </li>        
</ol>

我不知道如何将li添加到动态创建的ol中。有什么想法吗？

有没有一种方法可以让代码对页面上的每组元素都做同样的操作，即创建一个编号从1开始的新列表，但对于它遇到的每组<p class="SO-Para-Numbered-List"><span>i</span> some text </p>？

我试着将其设置为定位前一个SOPara，这是一个总是在我想变成列表项的段落之前的段落，但我被卡住了

$(document).ready(function(){
$(".SO-Para-Numbered-List").each(function(){
    if($(this).prev("p").hasClass("SOPara")){
        $(this).before("<ol class='newList'></ol>");
        $(this).siblings().nextUntil(".SOPara").each(function(){
        var $this = $(this);
        $(this).find("span").remove();
        var listContent = $(this).text();
        var newListItem = $(this).replaceWith("<li>"+listContent+"</li>");
        });//end siblings function
    }//end if
})//end SO Para function

})；

您可以使用insertBefore()来获得对ul的引用，然后将li附加到该

$(document).ready(function() {
  var $ul = $("<ol class='newList'>").insertBefore('.SO-Para-Numbered-List:first');
  //for each para item
  $(".SO-Para-Numbered-List").each(function() {
    $(this).find("span").remove();
    var thisContent = $(this).text();
    $('<li />', {
      'class': 'SOlistItem',
      text: thisContent
    }).css({
      'list-style-type': 'lower-roman'
    }).appendTo($ul);
  }).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="SO-Para-Numbered-List"><span>i</span> some text</p>
<p class="SO-Para-Numbered-List"><span>ii</span> some text</p>
<p class="SO-Para-Numbered-List"><span>iii</span> some text</p>
<p class="SO-Para-Numbered-List"><span>iv</span> some text</p>
<p class="SO-Para-Numbered-List"><span>v</span> some text</p>
<p class="SO-Para-Numbered-List"><span>vi</span> some text</p>
<p class="SO-Para-Numbered-List"><span>vii</span> some text</p>
<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

$(".SO-Para-Numbered-List:first").before("<ol class='newList'>");
$("p.SO-Para-Numbered-List").each(function() {
    var getText = $(this).clone().children().remove().end().text();
    $(".newList").append('<li>'+getText+'</li>');
}).remove();

工作Fiddle：https://jsfiddle.net/ydfyh19g/1/

尝试附加函数：

$(document).ready(function() {
  $("<ol class='newList'>").insertBefore('.SO-Para-Numbered-List:first');
//for each para item
$(".SO-Para-Numbered-List").each(function(){
    //remove span
    $(this).find("span").remove();
    //save the text
    var thisContent = $(this).text();
 //add items to list
    $("ol.newList").append("<li style='list-style-type:lower-roman;' class='SOlistItem'>"+thisContent+"</li>");
  
    $(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="SO-Para-Numbered-List"><span>i</span> some text</p>
<p class="SO-Para-Numbered-List"><span>ii</span> some text</p>
<p class="SO-Para-Numbered-List"><span>iii</span> some text</p>
<p class="SO-Para-Numbered-List"><span>iv</span> some text</p>
<p class="SO-Para-Numbered-List"><span>v</span> some text</p>
<p class="SO-Para-Numbered-List"><span>vi</span> some text</p>
<p class="SO-Para-Numbered-List"><span>vii</span> some text</p>
<p class="SOPara">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

当前正在li元素上设置list-style-type，而它应该在ol上。此外，使用add()并没有达到你想要的效果，你应该使用append()。

为了达到您的要求，您可以创建一个新的ol并将其保存在一个变量中。这将允许您在循环中直接向其append()，同时也删除原始的SO-Para...元素。试试这个：

var $ol = $('<ol class="newList">').insertBefore('.SO-Para-Numbered-List:first()');
$(".SO-Para-Numbered-List").each(function() {
    $ol.append("<li>" + $(this).find('span').remove().end().text() + "</li>");
}).remove();

工作示例

相关文章：