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

how can i add items to selected append list jquery

本文关键字：追加 列表 jQuery 项目 添加      更新时间：2023-09-26

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

演示

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

试试这个:)

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

相关文章：