javascript - 从我的管理结构中提取 ol 结构

Question

我有一个由我的管理区域创建的代码(ol 标签)，用于在前端站点创建一个菜单(查看附件 img)。

我的程序代码是这样的(*):

<ol class="default vertical" id="MyMenu" style="">
    <li>
        <span id="title-item-28xvn0co4m2ijeinczh1" class="">item 01</span>
        <!-- Button to control edit/delete li element -->
        <div class="button btn-modify-row" onclick="modifyLi('28xvn0co4m2ijeinczh1')">
            <i class="fas fa-pencil-alt"></i>
        </div>
        <div class="button btn-delete-row" onclick="removeLi('28xvn0co4m2ijeinczh1')">
            <i class="far fa-trash-alt"></i>
        </div>
        <!-- Button to control edit/delete li element -->
        <ol>
            <li id="sd28xa19jmpjeincpmd" data-url="www.domain.com" data-target="_blank" data-target-int="3" data-parent="false" class="">
                <span id="title-item-sd28xa19jmpjeincpmd" class="myClassUrl">sub-Item-01</span>
                <!-- Button to control edit/delete li element -->
                <div class="button btn-modify-row" onclick="modifyLi('sd28xa19jmpjeincpmd')">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="button btn-delete-row" onclick="removeLi('sd28xa19jmpjeincpmd')">
                    <i class="far fa-trash-alt"></i>
                </div>
                <!-- Button to control edit/delete li element -->
            </li>
        </ol>
    </li>
    <li id="vqwq4ekze3qjeiogpye" data-url="www.domain.com" data-target="_blank" data-target-int="3" data-parent="true">
        <span id="title-item-vqwq4ekze3qjeiogpye" class="myClassUrl">item-02</span>
        <!-- Button to control edit/delete li element -->
        <div class="button btn-modify-row" onclick="modifyLi('vqwq4ekze3qjeiogpye')">
            <i class="fas fa-pencil-alt"></i>
        </div>
        <div class="button btn-delete-row" onclick="removeLi('vqwq4ekze3qjeiogpye')">
            <i class="far fa-trash-alt"></i>
        </div>
        <!-- Button to control edit/delete li element -->
        <ol style="">
            <li id="x6sqmi7seucjeiogt4f" data-url="www.domain.com" data-target="_self" data-target-int="2" data-parent="false" class="">
                <span id="title-item-x6sqmi7seucjeiogt4f" class="myClassUrl">sub-item-02-01</span>
                <!-- Button to control edit/delete li element -->
                <div class="button btn-modify-row" onclick="modifyLi('x6sqmi7seucjeiogt4f')">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="button btn-delete-row" onclick="removeLi('x6sqmi7seucjeiogt4f')">
                    <i class="far fa-trash-alt"></i>
                </div>
                <!-- Button to control edit/delete li element -->
            </li>
            <li id="ppfxvunix5djeiogwzq" data-url="www.domain.com" data-target="_top" data-target-int="4" data-parent="true" class="">
                <span id="title-item-ppfxvunix5djeiogwzq" class="">sub-item-02-02</span>
                <!-- Button to control edit/delete li element -->
                <div class="button btn-modify-row" onclick="modifyLi('ppfxvunix5djeiogwzq')">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="button btn-delete-row" onclick="removeLi('ppfxvunix5djeiogwzq')">
                    <i class="far fa-trash-alt"></i>
                </div>
                <!-- Button to control edit/delete li element -->
                <ol>
                    <li id="p6sd5w6sedjeioh1af" data-url="www.domain.com" data-target="_blank" data-target-int="3" data-parent="false" class="">
                        <span id="title-item-p6sd5w6sedjeioh1af" class="myClassUrl">sub-sub-item-02-02</span>
                        <!-- Button to control edit/delete li element -->
                        <div class="button btn-modify-row" onclick="modifyLi('p6sd5w6sedjeioh1af')">
                            <i class="fas fa-pencil-alt"></i>
                        </div>
                        <div class="button btn-delete-row" onclick="removeLi('p6sd5w6sedjeioh1af')">
                            <i class="far fa-trash-alt"></i>
                        </div>
                        <!-- Button to control edit/delete li element -->
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

我必须按如下方式推断结构(**):

<ol id="MyMenu">
    <li><span>item 01</span>
        <ol>
            <li>
                <a href = "www.domain.com" target = "_blank">sub-Item-01</a>
            </li>
        </ol>
    </li>
    <li>
        <a href = "www.domain.com" target = "_blank">item-02</a>
        <ol>
            <li>
                <a href = "www.domain.com" target = "_self">sub-item-02-01</a>
            </li>
            <li>
                <a href = "www.domain.com" target = "_top">sub-item-02-02</a>
                <ol>
                    <li>
                        <a href = "www.domain.com" target = "_blank">sub-sub-item-02-02</a>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

我的实时编辑是这样的:

我可以从源 (*) 中提取结果 (**) 吗？

我没有太多经验，我正在学习。我尝试编写 js 函数来提取代码，但我遇到了很多困难

    function PurifierMyStructure(IdObject) {
        $("#"+IdObject+" ul > li").each(function() {
            console.log(this.id in data);
            if($('#'+IdObject).attr('data-url') != "") {
                // is a link
            } else {
                // is a simple span
            }            
        });
        $("div").remove();
     }

Answer 1

这个函数假设ol#myMenu可以有多个li
但是li里面应该只有一个ol li。

代码中的注释解释了它是如何工作的。

$(function() {
  $('ol#MyMenu').removeAttr('class style');
  
  $('ol#MyMenu>li').each( function( index, item ) {
    // get the url
    var url = $(this).data('url');
    // get the link text
    var anchorText = $(this).find('>span').text();
    var anchor = $('<a/>').attr({"href": url, "target": "_blank"}).text( anchorText );
    
    // same for the sub URL
    var subUrl = $(this).find('>ol>li').data('url');
    var subAnchorText = $(this).find('>ol>li>span').text();
    var subAnchor = $('<a/>');
    subAnchor.attr({"href": subUrl, "target": "_self"}).text( subAnchorText );

    // remove the attributes
    $(this).removeAttr('id data-url data-target data-target-int data-parent');
    // empty the element
    $(this).html('');
    
    //create an ol
    var ol = $('<ol/>');
    var li = $('<li/>');
    
    anchor.appendTo( $(this) );
    subAnchor.appendTo(li);
    li.appendTo(ol)
    ol.appendTo($(this));
  });
  
  var code = $('#MyMenu').wrap('<p/>').parent().html();
  $('#result').text( code ).html();
});

#result {
  white-space: pre;
}
ol { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="default vertical" id="MyMenu" style="">
    <li id="irqhaih2yxcjeifppk9" data-url="www.demo.com" data-target="_blank" data-target-int="1" data-parent="true">
        <span id="title-item-irqhaih2yxcjeifppk9">aasdas</span>
        <!-- Button to control edit/delete li element -->
        <div class="button btn-modify-row" onclick="modifyLi('irqhaih2yxcjeifppk9')">
            <i class="fas fa-pencil-alt"></i>
        </div>
        <div class="button btn-delete-row" onclick="removeLi('irqhaih2yxcjeifppk9')">
            <i class="far fa-trash-alt"></i>
        </div>
        <!-- Button to control edit/delete li element -->
        <ol>
            <li id="o404xc0cilkjeifpvy1" data-url="www.sub-demo.com" data-target="_self" data-target-int="1" data-parent="false" class="">
                <span id="title-item-o404xc0cilkjeifpvy1">sads</span>
                <!-- Button to control edit/delete li element -->
                <div class="button btn-modify-row" onclick="modifyLi('o404xc0cilkjeifpvy1')">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="button btn-delete-row" onclick="removeLi('o404xc0cilkjeifpvy1')">
                    <i class="far fa-trash-alt"></i>
                </div>
                <!-- Button to control edit/delete li element -->
            </li>
        </ol>
    </li>
</ol>

<div id="result"></div>

结果显示了新的结构。

短一点:

$(function() {
  $('ol#MyMenu').removeAttr('class style');
  
  $('ol#MyMenu>li').each( function( index, item ) {
    var anchor = $('<a/>')
      .attr(
        {"href": $(this).data('url'),
         "target": "_blank"})
      .text( $(this).find('>span').text() );
   
    var subAnchor = $('<a/>')
      .attr(
        {"href": $(this).find('>ol>li').data('url'),
         "target": "_self"})
       .text( $(this).find('>ol>li>span').text() );

    $(this)
      .removeAttr('id data-url data-target data-target-int data-parent')
      .html('')
      .append( anchor );
   
    var ol = $('<ol/>')
      .append( 
        $('<li/>').append(subAnchor)
      )
      .appendTo( $(this) );
  });
  
  // single line
  /*
  $('ol#MyMenu').removeAttr('class style');
  $('ol#MyMenu>li').each( function( index, item ) {
    var anchor = $('<a/>').attr({"href": $(this).data('url'),"target": "_blank"}).text( $(this).find('>span').text() );
    var subAnchor = $('<a/>').attr({"href": $(this).find('>ol>li').data('url'),"target": "_self"}).text( $(this).find('>ol>li>span').text() );
    $(this).removeAttr('id data-url data-target data-target-int data-parent').html('').append( anchor );
    var ol = $('<ol/>').append($('<li/>').append(subAnchor)).appendTo( $(this) );
  });
  */
  var code = $('#MyMenu').wrap('<p/>').parent().html();
  $('#result').text( code ).html();
});

#result {
  white-space: pre;
}
ol { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="default vertical" id="MyMenu" style="">
    <li id="irqhaih2yxcjeifppk9" data-url="www.demo.com" data-target="_blank" data-target-int="1" data-parent="true">
        <span id="title-item-irqhaih2yxcjeifppk9">aasdas</span>
        <!-- Button to control edit/delete li element -->
        <div class="button btn-modify-row" onclick="modifyLi('irqhaih2yxcjeifppk9')">
            <i class="fas fa-pencil-alt"></i>
        </div>
        <div class="button btn-delete-row" onclick="removeLi('irqhaih2yxcjeifppk9')">
            <i class="far fa-trash-alt"></i>
        </div>
        <!-- Button to control edit/delete li element -->
        <ol>
            <li id="o404xc0cilkjeifpvy1" data-url="www.sub-demo.com" data-target="_self" data-target-int="1" data-parent="false" class="">
                <span id="title-item-o404xc0cilkjeifpvy1">sads</span>
                <!-- Button to control edit/delete li element -->
                <div class="button btn-modify-row" onclick="modifyLi('o404xc0cilkjeifpvy1')">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="button btn-delete-row" onclick="removeLi('o404xc0cilkjeifpvy1')">
                    <i class="far fa-trash-alt"></i>
                </div>
                <!-- Button to control edit/delete li element -->
            </li>
        </ol>
    </li>
</ol>

<div id="result"></div>