无法使用Jquery函数添加到族树

时间:2015-03-13 11:34:28

标签: jquery tree

我正在创建一个小型网站,您可以通过添加儿童或大孩子来创建家谱。我使用的是CSS3 family tree,但我遇到的问题是当添加了一个孩子或者大孩子时,单击按钮时他们没有被添加到正确的li中。我可能还想在点击按钮时删除孩子或者孩子,这可能需要保持计数,尽管我更喜欢先完成添加,然后再继续删除。 任何建议都会非常感激。 感谢

 <ul id="navlist">            
        <li>
            <button type="button"  id="addChild"> Add Child</button>
        </li>
        <li>
            <button type="button"  id="addSib"> Add Sibling</button>
        </li>            
        <li>
            <button type="button" id="removeChild"> Remove Child</button>
        </li>
        <li>
            <button type="button" id="removeSib"> Remove Sibling</button>
        </li>
    </ul>

家谱布局

<div id="content-body">
        <div class="tree">
            <ul>
                <li>
                    <a href="#" class="p">
                        <div class="parent"></div>                              

                    </a>
                    <ul>
                        <li class="li2">
                            <a href="#" class="c">
                                <div class="child"></div>                      

                            </a>
                                <ul>
                                    <li class="li3">
                                        <a href="#" class="s">
                                            <div class="sib"></div>                                                                                            
                                        </a>
                                     </li>
                                </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

功能

$(document).ready(function(){

    $("#addChild").click(function(){
        var row = $('a').parent('.li2');
        var c = $("<a href='#' class='c'><div class='child'></div></a>");

        $('c').append(row);
        c.appendTo(row);
    });


    $("#addSib").click(function(){
        var row = $('a').parent('.li3')
        var a = $("<a href='#' class='s'><div class='sib'></div></a>");

        $('s').append(row);
        a.appendTo(row);

    });

});

0 个答案:

没有答案