添加一個類到動態創建的列表元素

我有以下代碼，它接受來自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上的開發人員工具時，樣式沒有顯示出來。 –

添加一個類到動態創建的列表元素

回答

相關問題