0

私はこのタイプのhtmlを持っています:-

<ul>
  <li>Activities<ul>
      <li>Physical1<ul>
          <li>Cricket<ul>
              <li>One Day</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Test1<ul>
          <li>Test At Abc</li>
        </ul>
      </li>
      <li>Test2<ul>
          <li>Test At Xyz</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<br>

これは、xml ファイルと xslt をロードするための完全なコードです。xslt を使用して ul li リストを取得します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Untitled Page</title>
    <script>
        var xml = loadXMLDoc("abc.xml");
        var xsl = loadXMLDoc("a.xsl");

        function loadXMLDocActiveX(location) {
            var doc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
            doc.async = false;
            doc.load(location);
            return doc;
        }

        function loadXMLDocOther(location) {
            xhttp = new XMLHttpRequest();
            xhttp.open("GET", location, false);
            xhttp.send("");
            return xhttp.responseXML;
        }

        function loadXMLDoc(dname) {
            if (window.ActiveXObject) {
                return loadXMLDocActiveX(dname);
            }
            else if (window.XMLHttpRequest) {
                return loadXMLDocOther(dname);
            }
        }

        function transformActiveX(xml, xsl, target, selected) {
            var transform = new ActiveXObject("MSXML2.XSLTemplate");
            transform.stylesheet = xsl;
            var processor = transform.createProcessor();
            processor.input = xml;

            if (selected) {
                processor.addParameter("selected", selected);
            }

            processor.transform();
            target.innerHTML = processor.output;
        }

        function transformOther(xml, xsl, target, selected) {
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);

            if (selected) {
                xsltProcessor.setParameter(null, "selected", selected);
            }

            var resultDocument = xsltProcessor.transformToFragment(xml, document);
            target.innerHTML = "";
            target.appendChild(resultDocument);
        }

        function displayResult() {
            var targetElement = document.getElementById("load");

            // code for IE
            if (window.ActiveXObject) {
                transformActiveX(xml, xsl, targetElement);
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && 
                     document.implementation.createDocument) {
                transformOther(xml, xsl, targetElement);
            }
        }
    </script>
</head>
<body onload="displayResult()">
    <div id="load">
    </div>
</body>
</html>

リーフノードをクリックすると、そのテキストが設定されます。 <div id="result"/> たとえばOne Day、最後の子をクリックすると、子がなく、そのテキストがdivタグにコピーされます。
どのように可能か... jquery関数のクリックで機能すると思います。
ありがとう...

4

2 に答える 2

2

HTMLを変更する必要があるようですが、とにかくこれを試してください：

ワーキングデモ

$('li:not(:has(*))').click(function(){
     $('#result').text($(this).text());
});


<div id="result"></div>
于 2013-04-24T12:31:42.900 に答える
1

これにより、子のないすべての li が選択されます。次に、クリックイベントを添付するだけです。(有効な HTML を想定)

$('li:not(:has(*))').click(.....)
于 2013-04-24T12:26:14.810 に答える