自动递增javascript函数生成的li标记

Autoincrement li tags generated by a javascript function

本文关键字：li 标记 函数 javascript      更新时间：2023-09-26

我有一个解析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>

等等。

// 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的答案中给出。

你不能这样做吗：

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
}

我的意思是：

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. **/
}
相关文章：