如何使用JS从右到左显示面包屑？

Question

如何从右到左显示面包屑导航菜单？

例如：

document.title «myPage«Home

我正在使用下面从左到右显示的脚本，但我无法弄清楚如何正确操作它。

<script language="JavaScript">
<!-- 
  function breadcrumbs(){
    sURL = new String;
    bits = new Object;
    var x = 0;
    var stop = 0;
    var output = "<div class=topnav><A HREF=/>Hyperdisc</A> &raquo; ";

    sURL = location.href;
    sURL = sURL.slice(8,sURL.length);
    chunkStart = sURL.indexOf("/");
    sURL = sURL.slice(chunkStart+1,sURL.length)

    while(!stop){
      chunkStart = sURL.indexOf("/");
      if (chunkStart != -1){
        bits[x] = sURL.slice(0,chunkStart)
        sURL = sURL.slice(chunkStart+1,sURL.length);
      }else{
        stop = 1;
      }
      x++;
    }

    for(var i in bits){
      output += "<A HREF=\"";
      for(y=1;y<x-i;y++){
        output += "../";
      }
      output += bits[i] + "/\">" + bits[i] + "</A> &raquo; ";
    }
    document.write(output + document.title);
    document.write("</div>");
  }
 // -->
</script>

其中显示：

Home» myPage» 文档.title

Answer 1

你不需要 JS。你需要的是direction CSS 属性。这是测试用例http://jsbin.com/welcome/55152/edit。 Support for direction property is good

主要有以下几点：

ul {
  direction: rtl;
}
li { display: inline; }
a { display: inline-block; }

更新如果你绝对必须使用 JS，这里是简单的 sn-p：

var list = document.getElementById('nav'),
    lis = document.querySelectorAll('li'),
    l = lis.length - 1,
    i,
    newList = document.createElement('ul');

for(i = l; i >= 0; i--) {
  newList.appendChild(lis[i]);
}
list.parentNode.replaceChild(newList, list);

sn-p 假设标记如下：

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">myPage</a></li>
  <li>Document</li>
</ul>

测试用例在这里——http://jsbin.com/welcome/55163/edit

为实际的 sn-p 更新

当涉及到问题中的实际代码时，您可能希望用这个 sn-p 替换最后一个 for() 循环中的所有内容：

document.write(output + document.title);
for(var i = bits.length - 1; i >= 0; i--){
  output += "&laquo; <A HREF=\"";
  for(y=1;y<x-i;y++){
    output += "../";
  }
  output += bits[i] + "/\">" + bits[i] + "</A>";
}
document.write("</div>");