【问题标题】：Extract ol structure from my admin structure从我的管理结构中提取 ol 结构
【发布时间】：2018-08-16 22:25:21
【问题描述】：

我的管理区域创建了一个代码（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();
     }

【问题讨论】：

所以你想删除 span 和 div？
准确。我应该用标签 a (href = data-url and target = data-target) 替换跨度并删除 div 元素
好的。到目前为止，您尝试了什么，发生了什么？
我可以编写可能的函数来提取我的代码但不起作用。函数是这个 function PurifierMyStructure(IdObject) { $("#"+IdObject+" ul > li").each(function() { console.log(this.id in data); if($('#'+IdObject ).attr('data-url') != "") { // 是一个链接 } else { // 是一个简单的 span } });
将您的代码添加到问题中，以便人们可以帮助解决它:)

标签： javascript jquery css html each

【解决方案1】：

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

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

$(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>

【讨论】：

:) :) 谢谢。结果是我更喜欢得到的。我正在尝试研究您的功能以适应我的功能，并尝试学习您的解决方案。太好了！
关于你的答案，我可以在#MyMenu 元素中创建 1 个 ol#MyMenu 但 N. sub li>ol>li>ol>li。
该代码适用于多个li（在第一级），但其中li只能是一个嵌套ol。此代码不适用于多个嵌套列表...如果您的代码有它们，请添加该代码...对于特定代码段，这是一个非常特定的功能。
我更新了帖子，插入了一个更适合现实的例子

【解决方案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');
}

【讨论】：