如何将项目添加到选定的追加列表jquery

时间:2016-03-16 10:48:24

标签: javascript jquery

我想在所选列表组中添加列表..我从添加按钮添加列表,从添加的列表组中,如果我点击任何div列表,将打开一个模态窗口,从那里我必须添加列表到仅选择列表组,但在我的代码中,列表附加到所有列表组..如何将列表添加到仅选定列表组..请帮助我解决此问题..

DEMO

$(document).ready(function(){

    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });

    $("#add_list").on('click',function(){
        $("#list_group").append("<div class="+'opener'+"><h2>List (//click)</h2><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></div>");
    });

    $( "#dialog" ).dialog({
        autoOpen: false,
    });
 
    $(document).on('click','.opener',function() {
        $( "#dialog" ).dialog( "open" );
    });
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<button id="add_list">add list</button>

<div id="dialog" title="Add List">
    <h2>List items</h2>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button id="btn2">Append list items</button>
</div>
<div id="list_group">
    <div class="opener">
        <h2>List (//click)</h2>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

试试这个:)

&#13;
&#13;
        $(document).ready(function(){
            var $appendItemsToList;
            $("#btn2").click(function(){
                $("ol", $appendItemsToList).append("<li>Appended item</li>");
                $("#dialog ol").append("<li>Appended item</li>");
            });

            $("#add_list").on('click',function(){
                $("#list_group").append("<div class="+'opener'+"><h2>List (//click)</h2><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></div>");
            });

            $( "#dialog" ).dialog({
                autoOpen: false,
            });
         
            $(document).on('click','.opener',function() {
                $appendItemsToList = $(this);
                $( "#dialog" ).dialog( "open" );
                $( "#dialog ol" ).html($('ol', $appendItemsToList).html());
            });
        });
&#13;
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <button id="add_list">add list</button>

        <div id="dialog" title="Add List">
            <h2>List items</h2>
            <ol>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ol>
            <button id="btn2">Append list items</button>
        </div>
        <div id="list_group">
            <div class="opener">
                <h2>List (//click)</h2>
                <ol>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ol>
            </div>
        </div>
&#13;
&#13;
&#13;