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

Question

我想在选定的列表组中添加列表..我从添加按钮、添加的列表组中附加列表，如果我单击任何 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>

Answer 1

试试这个:)

        $(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());
            });
        });

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