0

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 は、各ノードの背景画像として適用する必要がある特定の画像のパスを保持するように作成されます。つまり、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>

新しい要素を作成するときにの.cssプロパティを使用してjquery設定する必要があることは理解していますが、その方法がわかりません。background-image<li>

ご覧いただきありがとうございます。

4

1 に答える 1

1

ファイルのURLを返す場合は、要素$(this).text()にスタイルを追加するだけです<li>

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

もちろん、background-position、background-repeat などの他の CSS をセットアップする必要があるでしょう。または、次のような短いバージョンの CSS を使用します。

"<li class='class' style='background: url(" + $(this).text() + ") no-repeat 0 0;'>...</li>"
于 2012-10-15T20:02:27.547 に答える