使用jQuery序列化UL菜单项

Question

我正在创建一个拖放菜单制作工具（就像wordpress的菜单制作工具功能），结合了html，jquery和amp; PHP。 PHP我用来将菜单项存储到数据库中。我已经构建了这个功能，但它有一个需要修复的小bug。让我解释一下我做了什么。下面是使用前端接口生成的示例菜单HTML结构。

<script>
// Attach a submit handler to the form
$( "#form" ).submit(function( event ) {

// Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
donate_amount = $form.find( "input[name='donation-amount']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { amount: donate_amount } );

// Put the results in message div
  posting.done(function( data ) {
    var message_returned = $( data ).find( "#message" ); //hope your are returning message, also you can return other things like message type and create message on frontend as accordingly
    $( ".message" ).empty().append( message_returned ); //adding returned message to your message div
  });
});
</script>

在提交HTML表单之前，我已经构建了一个jquery脚本，它自动将菜单ID分配给隐藏字段。并且值如下所示填充：

<ul>
    <li>
        <a href="#">This is parent item 1</a>
        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
    </li>
    <li>
        <a href="#">This is parent item 2</a>
        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">

        <!-- Sub menu level 1 : starts -->
        <ul>
            <li>
                <a href="#">This is level 1 item 1</a>
                <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
                <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
                <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">

                <!-- Sub menu level 3 : starts -->
                <ul>
                    <li>
                        <a href="#">This is level 2 item 1</a>
                        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
                        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
                        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
                    </li>
                    <li>
                        <a href="#">This is level 2 item 2</a>
                        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
                        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
                        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
                    </li>
                </ul>
                <!-- Sub menu level 3 : ends -->
            </li>
            <li>
                <a href="#">This is level 1 item 2</a>
                <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
                <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
                <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
            </li>
        </ul>
        <!-- Sub menu level 1 : ends -->

    </li>
    <li>
        <a href="#">This is parent item 3</a>
        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
    </li>
    <li>
        <a href="#">This is parent item 5</a>
        <input type="text" id="link_id" class="link_id" name="link_id[]" value="">
        <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="">
        <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="">
    </li>
</ul>

所以排序说明是， link_id 是从1开始的每个菜单项的自动生成的增量ID。 parent_id 是每个菜单项的父菜单ID。对于第一级，父ID将为0. <ul> <li> <a href="#">This is parent item 1</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="1"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="0"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="0"> </li> <li> <a href="#">This is parent item 2</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="2"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="0"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="1"> <!-- Sub menu level 1 : starts --> <ul> <li> <a href="#">This is level 1 item 1</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="5"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="2"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="0"> <!-- Sub menu level 3 : starts --> <ul> <li> <a href="#">This is level 2 item 1</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="7"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="5"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="0"> </li> <li> <a href="#">This is level 2 item 2</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="8"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="5"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="1"> </li> </ul> <!-- Sub menu level 3 : ends --> </li> <li> <a href="#">This is level 1 item 2</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="6"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="2"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="1"> </li> </ul> <!-- Sub menu level 1 : ends --> </li> <li> <a href="#">This is parent item 3</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="3"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="0"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="2"> </li> <li> <a href="#">This is parent item 5</a> <input type="text" id="link_id" class="link_id" name="link_id[]" value="4"> <input type="text" id="parent_id" class="parent_id" name="parent_id[]" value="0"> <input type="text" id="sortorder" class="sortorder" name="sortorder[]" value="3"> </li> </ul> 是从0开始的特定菜单级菜单项的排序顺序。

以下是自动填充输入值的javascript。

sortorder

问题是，这个脚本有时会生成重复的link_id。所以寻找解决方案。

Answer 1

我只是写这个脚本，我知道这个更长，但它已经过测试了！

设置热门网址id =主菜单：ul id= "main-menu"

然后粘贴此代码：

function slz() {
var menu = document.getElementById("");


var current = menu;
var past = current;
var nextList = [];
var serialized = false;

var link = 0; // link id
var deep = 0; // deep
var i = 0; // sort order

var j = 0;

while (!serialized) {

    serialized = true;

    for (i = 0; i < current.children.length; i++) {
        link++;
        current.children[i].children[1].value = link;
        current.children[i].children[2].value = deep;
        current.children[i].children[3].value = i;
        if (current.children[i].children.length > 4) {

            for (j = 4; j < current.children[i].children.length; j++) {

                nextList.push(current.children[i].children[j]);

            }
        }
    }
    if (nextList.length > 0) {

        past = current;
        current = nextList[0];
        nextList.splice(0, 1);

        if (past.parentNode != current.parentNode) {
            deep++;
        }

        serialized = false;
    }


}

}
slz();