Question

我有这个函数解析xml文件：

<ul id="flussi">    
    <script type="text/javascript">
xmlDoc=loadXMLDoc("FLUSSI.xml") // Path to the XML file;
var M = xmlDoc.getElementsByTagName("ROAD");
for (i=0;i<M.length;i++){

//document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
document.write("<li>"+xmlDoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+xmlDoc.getElementsByTagName("SIM")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+xmlDoc.getElementsByTagName("REAL")[i].childNodes[0].nodeValue+ "</li>");
document.write("<li>"+ xmlDoc.getElementsByTagName("DIFF")[i].childNodes[0].nodeValue+"--"+"</li>");

}
 </script>
</ul>

在html文件中写入如下值的列表：

<li> Ponte_Nuovo_sx</li>
<li>87</li>
<li>72</li>
<li>15--</li>

现在我想自动增加li标签，但我仍然试图找到解决方案如果li标记不是由函数生成的，那么如果它们是静态的，我可以递增li标记。

我想获得的是（如果可能的话）：

<li id=1> Ponte_Nuovo_sx </li>
<ii id=2> 87 </li>

等等。

Answer 1

// Have this run after it's been written to the document
$(function() {
    $('ul li').each(function() {
        $(this).attr('id', ($(this).index() + 1));
    });
});

请注意，这可能并且应该通过php，python或等效的方式运行。

否则你可以简单地处理一个增加的值，并在Anubhab的答案中给出。

Answer 2

你不能这样做：

var count=0;
for (i=0;i<M.length;i++){

//document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
document.write("<li id="+count+">"+xmlDoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValue+ "</li>");
count++;
document.write("<li id="+count+">"+xmlDoc.getElementsByTagName("SIM")[i].childNodes[0].nodeValue+ "</li>");
count++;
//and so on
}

Answer 3

只是为了记录，这就是我的意思：

<强> JS

xmlDoc = loadXMLDoc("FLUSSI.xml") // Path to the XML file;
var M = xmlDoc.getElementsByTagName("ROAD");
var t_name = xmlDoc.getElementsByTagName("NAME");
var t_sim = xmlDoc.getElementsByTagName("SIM");
var t_real = xmlDoc.getElementsByTagName("REAL");
var t_diff = xmlDoc.getElementsByTagName("DIFF");


for (i = 0; i < M.length; i++) {

    //document.write("<div id='id'>"+xmlDoc.getElementsByTagName("ID")[i].childNodes[0].nodeValue+"</div>");
    document.write('<li class="name" id="name_' + i + '">' + t_name[i].childNodes[0].nodeValue + '</li>' 
        + '<li class="sim" id="sim_' + i + '>' + t_sim[i].childNodes[0].nodeValue + '</li>' 
        + '<li class="real" id="real_' + i + '>' + t_real[i].childNodes[0].nodeValue + '</li>' 
        + '<li class="diff" id="diff_' + i + '>' + t_diff[i].childNodes[0].nodeValue + '--</li>');

}

<强> CSS

li.name{

}
li.sim{

}
li.real{

}
li.diff{

}
li#name_1{

}
/** Only with CSS3 compliant browsers **/
li.name:nth-child(2n)
{
    /** Only pair child, works with numbers to to target single element but faster to use ID then. **/
}

由javascript函数生成的自动增量li标签

3 个答案: