Jquery 如何在javascript中为菜单添加图片

我有水平菜单。此菜单有子菜单，这些子菜单有子菜单。这些菜单来自一个json文件。在这里，我想为child添加一个箭头图像来显示，这些child有子child。如何添加此图像？ 我的javascript页面是

$(function() {
for(var i = 0, j = data[0].menu.length; i<j; i++) {
    var root_menu = data[0].menu[i];
    if(root_menu.hasOwnProperty("MenuId")) {
        $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>');
        if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
            $("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");
            for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
                var sub_menu = root_menu.Menus[n]; 
                if(sub_menu.hasOwnProperty("MenuId")) {
                    $("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>");
                    if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
                        $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
                        for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){
                            var subsub_menu = sub_menu.Menus[oo];
                            $("#menu_" + sub_menu.MenuId).append('<li class="nav-subchild"><a href="#">' + subsub_menu.MenuName + '</a>');
                        }
                        $("#menu_" + root_menu.MenuId + " li").last().append("</ul>");
                    }
                }
            }

        }
 $("#menu").append("</ul></li>");

    }
}
});

$（函数（）{
对于（变量i=0，j=data[0].menu.length；i 0）{
$（“#menu li”）.last（）.append（“
”）；
对于（变量n=0，m=root_menu.menu.length；n 0）{
$（“#menu_u”+root_menu.MenuId+“li”）.last（）.append（“
”）；
对于（var oo=0，pp=sub_menu.Menus.length；oo您可以这样做：

我不清楚你想把箭放在哪里，但你可以这样做

 #nav > ul > li:hover {
 background: url(images/dropdown_arrow.png) no-repeat scroll 0 0 #FFFFFF;
 border-color: #ccc #ccc #FFFFFF;
 border-style: solid;
 border-width: 1px;
 padding-bottom: 0;
 border-radius:1px;
 }

请参见此处的fiddle更新
只需使用css即可。
特殊类
子菜单的元素在背景中获得箭头图标

编辑：
当您从json构建菜单时，您已经可以向具有子菜单的菜单项添加一个特殊类，因为您已经在检查是否有子菜单

 ...   
   if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
     $("#menu_" + root_menu.MenuId + " li").last().addClass('hassub');
 ...

然后将图标添加到css中，以显示类为hassub的元素。
我在你的小提琴上加了这个：

编辑：
或者，在添加
ul
元素（这一步你可能会以任何方式进行）。正如我在roXon答案的评论中所写，但我也将在这里添加它：

 ...   
   if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
     $("#menu_" + root_menu.MenuId + " li").last().append(" ▼ <ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
 ...

。。。
if（sub_menu.hasOwnProperty（“菜单”）&&sub_menu.menu.length>0）{
$（“#menu_u”+root_menu.MenuId+“li”）.last（）.append（“▼ 
”；
...

然后没有额外的css代码=）
您可以在测试后在代码中添加一个图像，如果它有
子菜单

通过在li类的
菜单子项中的
锚定标记
中添加箭头图像

比如在你的代码中：
@Nithu我不会回答它不起作用：（我不知道你在演示中做了什么：））我甚至在我的回答中添加了一个现场演示……你能比“它是这样工作的”更具体些吗因为它对我来说毫无意义…：\n当我添加上面提到的代码时，它会在一个菜单中生成一个或多个箭头符号。@Nithu你能在我提供的演示中显示出有问题的箭头吗？如果你说的是子菜单中的箭头，如果你问我，这很好，因为子菜单也有一个子菜单：）@Nithu你添加了roXons的code进入循环，并且它会执行多个平铺。但是您不需要执行搜索操作，您可以在这里一次执行两件事情▼
”；
@MartinTurjak-I在点击左端的主页时需要一行代码。
 ...   
   if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
     $("#menu_" + root_menu.MenuId + " li").last().append(" ▼ <ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
 ...