如何反转ul li javascript asp.net

Question

我有一个使用英文版和阿拉伯文版的ul li菜单。现在，在阿拉伯语版本中，菜单必须按相反的顺序，我们如何才能实现我的代码

 <ul id="menu">
        <li><a href="../Default.aspx">
            <img src="../images/logoheader.png" height="24px" alt="Home" /></a></li>
        <li><a href="../Lgs.aspx?confirm=1">
            <%=Resources.Fields.lgs%></a> </li>
        <li><a href="../CustomPage.aspx?Pid=2">
            <%=Resources.Fields.aboutus%></a> </li>
        <li><a href="../Login.aspx?confirm=1">
            <%=Resources.Fields.login%>
        </a><a href="../Signup.aspx?confirm=1">
            <%=Resources.Fields.register%></a> </li>
            <li><a href="#">
                <%=Resources.Fields.more_new%></a></li>
    </ul>

这将显示如此 主页| Lgs |关于我们|登录|注册|更多

我想在javascript

中反转它

更多|注册|登录|关于我们| Lgs |家

Answer 1

我的建议是在服务器端的相应订单中输出li元素。

但是如果你想在客户端处理它：除非你需要支持IE7或更早版本，否则你不需要JavaScript。

为您提供多种客户端选项：

1. HTML dir属性（在IE7及更早版本上不起作用，适用于IE8及以上版本）

2. CSS的direction: rtl （在IE7及更早版本上无效，适用于IE8及以上版本）

3. JavaScript （甚至可以在IE6上运行）

1。 HTML dir属性

您可以使用dir上的ul属性：

<ul id="menu" dir="RTL">

如果li元素为inline-block，则会颠倒它们的顺序。

Live Example | Source

我建议在页面发布之前应用该属性服务器端，但是如果你需要在JavaScript中执行它：

document.getElementById("menu").dir = "RTL";

Live Example | Source

2。 CSS

您也可以通过应用CSS来实现：

#menu {
  direction: rtl;
}

Live Example | Source

3。的JavaScript

但JavaScript解决方案是按顺序遍历列表项，从第二个开始，并使用insertBefore DOM方法将它们移动到顶部。你最终得到了逆转的订单。看起来像这样：

var list = document.getElementById("menu");
var child, sibling;

if (list.childNodes.length > 1) {
  for (child = list.firstChild.nextSibling; child; child = sibling) {
    sibling = child.nextSibling;
    list.insertBefore(child, list.firstChild);
  }
}

Live Example | Source

---

以上所有调整li元素的顺序，但不调整其中文本的方向，我假设你在其他地方处理它。但是如果你不是，只需将这个CSS应用于你想要制作RTL而不是LTR的任何元素：

relevant_selector {
  direction:rtl;
  unicode-bidi:bidi-override;
}

Answer 2

您必须添加jquery并在正文中使用以下内容

 ul = $('#menu'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)});