Question

我有以下html结构：

  <div id="gw-sidebar" class="gw-sidebar">

    <div class="nano-content">
      <ul class="gw-nav gw-nav-list">
        <li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>

         //===>Need to add the new list using Jquery here

      </ul>

    </div>

  </div>

我想使用jquery向上面显示的类'init-un-active'添加如下所示的列表：

        <li class="init-arrow-down"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenario-1</span> <b class="gw-arrow"></b> </a>
          <ul class="gw-submenu">
            <li> <a href="javascript:void(0)">Scenario</a> </li>
            <li> <a href="javascript:void(0)">Resolutions</a> </li>
            <li> <a href="javascript:void(0)">Triggers</a> </li>
          </ul>
        </li>

如何使用jquery动态地将此代码添加到上述类中？

我尝试了以下但是它无法工作：

<script type="text/javascript">
function loadScenarioForm () {
    SideMenu.createBaseEntry();
   // ScenarioForm.create();
}

var SideMenu = {
container : null,

scenarioCount : 0,

scenarioTxt : "Scenario",
ResolutionsTxt : "Resolutions",
TriggersTxt : "Triggers",
menuLink : "javascript:void(0)",
subMenuLink1 : "javascript:void(0)",
subMenuLink2 : "javascript:void(0)",
subMenuLink3 :"javascript:void(0)",


createBaseEntry : function createDefault () {
    this.container = $(document.createElement('div'));
    this.container.addClass('gw-sidebar');
    var html = "";
    html += '<div id="gw-sidebar" class="gw-sidebar">';
    html += '<div class="nano-content">';
    html += '<ul class="gw-nav gw-nav-list">';
    html += '<li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> </li>';
    html += '</ul></div></div></div>';

    this.container.append(html);
    $('body').append(this.container);

    this.scenarioCount++;
    this.container.append(this.createEntry(scenarioCount));



},

createEntry : function createDefault (index) {
    var list = $('ul.mylist');
    var li = $('<li/>')
    .addClass('ui-menu-item')
    .attr('role', 'menuitem')
    .appendTo(list);
    return list;

},
</script>

请指教，

谢谢！

Answer 1

您可以将<li>作为模板，并使用jquery将其附加到<ul>。您可以尝试这样的Fiddle：

$(document).ready(function(){
    $('a').click(function() {
      var template = $('#hidden-template').html();
        $('.gw-nav').append(template);
});
});

Answer 2

if ($(".init-un-active").length == 0) {  
                    $.ajax({
                        url: 'URL From where you want to load ...',
                        type: 'POST',
                        data: { id: ID}, // pass your data here if any .. else keep empty
                        success: function (data) {
                            $(".init-un-active").css({ "display": "block", "z-index": "999999999999" });
                                $(".init-un-active").html(data);
                        },
                        error: function () {
                            alert('Unable to load menu...');
                        }
                    });
                }
                else {
                    if ($(".init-un-active ul").length > 0) {
                        $(".init-un-active ul").css("display", "none");
                        $(".init-un-active").css("display", "block");
                    }
                }

说明：

if ($(".init-un-active").length == 0)

此条件用于检查li中是否已加载项目..如果是，则无需调用ajax ..只需隐藏显示该菜单..

$(".init-un-active").css({ "display": "block", "z-index": "999999999999" });

此css适用于显示菜单前面并隐藏此菜单旁边的所有内容..

Answer 3

this.container.append(html);
    $('body').append(this.container);

而不是这个尝试这个

 $(".init-un-active").html(html);

使用jquery动态地将列表项添加到ul

3 个答案: