稍短一些：

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

此函数假定.eml可以有多个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; }

Answer 2

最终的功能是这个（正确）：）：

function demo(IdObject) {
   $("#"+IdObject+" div").remove();
        $.each($('#MyMenu li'), function() {

            var data_url = $(this).attr('data-url');
            var data_target = $(this).attr('data-target');
            var data_class = $(this).attr('data-custom-class');
            var data_style = $(this).attr('data-custom-style');

                if($(this).attr('data-url') != "") {

                    var $span = $("#title-item-"+this.id);
                    $($span).replaceWith(function() {
                        return $('<a>', {
                            id: this.id,
                            href: data_url,
                            target: data_target,
                            style: data_style,
                            'class': data_class,
                            html: $(this).html()
                        })
                    });
            } else {
                if (data_class != '') {
                    var $span = $("#title-item-"+this.id);
                        $($span).addClass(data_class);
                    }
                if (data_style != '') {
                    var $span = $("#title-item-"+this.id);
                    $($span).attr('style',data_style);
                }
        }
    $(this).removeAttr('id data-url data-target data-target-int data-parent data-custom-class data-custom-style class');
    });
   $('ol#'+IdObject).removeAttr('style');
   $('ol#'+IdObject +' ol').removeAttr('class style');
  $('ol#'+IdObject+' span').removeAttr('id');
  $('ol#'+IdObject+' a').removeAttr('id');
}

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

2 个答案:

稍短一些：