添加一个类到动态创建的列表元素

我有以下代码，它接受来自xml的输入并创建一个无序列表。添加一个类到动态创建的列表元素

$(function() { 
      var map = function() { 
        if ($(this).is("parent")) { 
         var children = $(this).children().map(map).get().join(''); 
         $(this).children().remove(); 
         var result = "<li class='BGOfDiv'>" + $(this).text(); 
         return result + "<ul>" + children + "</ul></li>"; 
        } 
        if ($(this).is("Children")) { 
         return "<li class='BGOfDiv'>" + $(this).text() + "</li>"; 
        } 
       }; 

       $.get("test.xml", function(data) { 
        var result = $(data).map(map); 
        $("#org").html(result[0]); 
        $("#org").jOrgChart({ 
          chartElement : '#chart', 
          dragAndDrop : false 
         }); 
         dragNodes(); 
       }, "html"); 

      });

目前，我的XML看起来像这样

<?xml version="1.0" encoding="utf-8"?> 
<Parent>Director 
    <Children>Exe Director1</Children> 
    <Children>Exe Director2</Children> 
    <Parent>Exe Director3 
     <Children>Sub Director 1</Children> 
     <Children>Sub Director 2</Children> 
     <Parent>Sub Director 3 
      <Children>Cameraman 1</Children> 
      <Children>Cameraman 2</Children> 
     </Parent> 
    </Parent>  
</Parent>

然而，XML将作出一定的保持图像的，我需要申请为每个node.That背景图片的路径我的XML看起来像

<?xml version="1.0" encoding="utf-8"?> 
<Parent>../images/1.jpg 
    <Children>../images/2.jpg</Children> 
    <Children>../images/3.jpg</Children> 
    <Parent>../images/4.jpg 
     <Children>../images/5.jpg</Children> 
     <Children>../images/6.jpg</Children> 
     <Parent>../images/7.jpg 
      <Children>../images/8.jpg</Children> 
      <Children>../images/9.jpg</Children> 
     </Parent> 
    </Parent>  
</Parent>

我明白，我将需要使用的jquery的.css属性和设置background-image当我创建的新<li>元素，但我无法弄清楚如何做到这一点。

感谢您的期待。任何帮助将不胜感激。

来源

2012-10-15 Harsha Venkatram

这可能不是一个好主意，可以将您传递给'map'，'map'的回调函数命名。 – jbabey

@ jbabey：谢谢，会改变:) :) –

如果该文件的$(this).text()回报的网址，你可以简单地添加样式在<li>元素

"<li class='class' style='background-image: url(" + $(this).text() + ");'>...</li>"

当然，你可能需要设置其他CSS像背景位置，背景重复等。或者使用短版本的css，如

"<li class='class' style='background: url(" + $(this).text() + ") no-repeat 0 0;'>...</li>"

来源

2012-10-15 20:02:27

是'$（this）.text（）'确实会返回文件的url，但是你上面提到的风格没有在代码中执行。我猜我给不正确的网址。请稍等一下。感谢您的帮助！ :) –

由于后台将设置在HTML页面中，图片url是相对于HTML页面的。 –

是否做到了这一点，但是当我检查Chrome上的开发人员工具时，样式没有显示出来。 –

添加一个类到动态创建的列表元素

回答

相关问题