0

これについて多くの質問が寄せられていることは承知していますが、アドバイスに従いましたが、xml/jQuery ファイルから非常に具体的で一見一貫性のない動作がまだ得られます。質問に入る前に、ここに私の jQuery を示します。

$(document).ready(function() {
    var $body = $('body');
    var currentXMLObjects;
    var $currentXMLContainers = new Array();
    var previousXMLObjects;
    $body.append("<div id='content'><h3>Staff Organisational Chart</h1></div>");
    // Load the xml file using ajax 
    $.ajax({
        type: "GET",
        url: "xml/content.xml",
        dataType: "xml",
        success: function (xml) {
            $xml = $(xml);
            console.log(xml.children[0]);
            appendNewContainers(xml.children[0].children);
        }
    });

    function appendNewContainers(children) {
        currentXMLObjects = children;
        console.log("currentXMLObjects.length = "+currentXMLObjects.length);
        for (var x=0;x<currentXMLObjects.length;x++) {
            $currentXMLContainers.push( $( currentXMLObjects[x] ) );
            $("#content").append('<div class="container"><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div></div>');
        }
    }
});

XML は次のとおりです。

<content>
    <level name="first name">
        <title>Title 1 Here</title>
        <firstName>First Name 1</firstName>
        <lastName>Last Name 1</lastName>
        <contact>Active</contact> 
    </level>
    <level name="second name">
        <title>Title 2 Here</title>
        <firstName>First Name 2</firstName>
        <lastName>Last Name 2</lastName>
        <contact>Active</contact>
    </level>
    <level name="third name">
        <title>Title 3 Here</title>
        <firstName>First Name 3</firstName>
        <lastName>Last Name 3</lastName>
        <contact>Active</contact>
    </level>
    <level name="fourth name">
        <title>Title 4 Here</title>
        <firstName>First Name 4</firstName>
        <lastName>Last Name 4</lastName>
        <contact>Active</contact>
    </level>
    <level name="fifth name">
        <title>Title 5 Here</title>
        <firstName>First Name 5</firstName>
        <lastName>Last Name 5</lastName>
        <contact>Active</contact>
    </level>
</content>

今私がやろうとしているのは、タイトル、firstName、および lastName ノードからテキストを取得し、それらを div 内の div に追加することです。

currentXMLObjects[x].childNodes[1のインデックス「1」を使用して各「タイトル」のテキストを取得できることに気付くまで、.childNodes[0]、firstChild、およびnodeValueのさまざまな配置を試して、しばらく時間がかかりました]... 問題は、firstName ノードと lastName ノードにアクセスできないようです。私は考えることができるすべてのアレンジメントを試しました：

currentXMLObjects[x].childNodes[1].childNodes[1].nodeValue は、次のように null エラーをスローします: currentXMLObjects[x].childNodes[0].childNodes[1].nodeValue

currentXMLObjects[x].childNodes[1].nodeValue は「null」を返し、追加します。

currentXMLObjects[x].childNodes[2].nodeValue は何も追加しません。

同様に、中間の 'childNodes[n]' がない組み合わせは、null を返すか、何も返しません。

ここで何が起こっているかについて手がかりを持っている人はいますか？「タイトル」ノードが XML 内で非常に深くネストされているように見えることに驚きました。「appendNewContainers」関数に送信される nodeList は、すでにドリルダウンされています。しかし、「レベル」要素の子ノードを探すことは、浅い深さでは機能しません。

どんな助けでも大歓迎です。乾杯。

4

2 に答える 2

2

xml データにも jQuery を使用しませんか? この例を確認してください (現在の xml 構造を使用): jsFiddle

var $target = $('content');
$target.children().each(function(){
    $body.append($(this).attr('name') + "<br />");
    $body.append($('title', this).text() + "<br />");
    $body.append($('lastName', this).text() + "<br />");
    $body.append($('contact', this).text() + "<br />");
    $body.append('<br /><br/>');
});

編集：

コード構造の使用 (jQuery の例を含む): jsFiddle

var xml = $('content');

appendNewContainers(xml[0].children);

function appendNewContainers(children) {
    currentXMLObjects = children;

    for (var x= 0; x < currentXMLObjects.length; x++) {
        $("#content").append(
            '<div class="container"><div>' + currentXMLObjects[x].children[0].innerText + 
            '</div><div>' + currentXMLObjects[x].children[1].innerText + 
            '</div><div>' + currentXMLObjects[x].children[2].innerText + '</div></div>'
        );
    }

    $('#content').append('<br style="margin-bottom: 40px" />');

    // jQuery way using tag names
    $(currentXMLObjects).each(function(){
        $("#content").append(
            '<div class="container"><div>' + $('title', this).text() + 
            '</div><div>' + $('firstName', this).text() + 
            '</div><div>' + $('lastName', this).text() + '</div></div>'
        );
    });
}
于 2016-01-28T16:15:12.450 に答える
1

取得した xml をドキュメントに追加し、querySelectors を使用してコンテンツをクエリすることは考えられますか? 次のようなもの（単純なjQueryの例ではありませんが、xmlを追加してクエリするためにjQueryを簡単に使用できるはずです）：

var xml = document.querySelector('content');

var names = document.querySelectorAll('[name]');
var result = document.querySelector('#result');

[].slice.call(names).forEach(
  function(nameElement) {
    result.textContent += 
      nameElement.querySelector('firstName').textContent + ' ' +
      nameElement.querySelector('lastName').textContent +
      '\n';
  } 
);
content {
  display: none;
 }
<pre id="result"></pre>

<content>
    <level name="first name">
        <title>Title 1 Here</title>
        <firstName>First Name 1</firstName>
        <lastName>Last Name 1</lastName>
        <contact>Active</contact> 
    </level>
    <level name="second name">
        <title>Title 2 Here</title>
        <firstName>First Name 2</firstName>
        <lastName>Last Name 2</lastName>
        <contact>Active</contact>
    </level>
    <level name="third name">
        <title>Title 3 Here</title>
        <firstName>First Name 3</firstName>
        <lastName>Last Name 3</lastName>
        <contact>Active</contact>
    </level>
    <level name="fourth name">
        <title>Title 4 Here</title>
        <firstName>First Name 4</firstName>
        <lastName>Last Name 4</lastName>
        <contact>Active</contact>
    </level>
    <level name="fifth name">
        <title>Title 5 Here</title>
        <firstName>First Name 5</firstName>
        <lastName>Last Name 5</lastName>
        <contact>Active</contact>
    </level>
</content>

于 2016-01-28T16:09:05.327 に答える