Question

我有自定义导航，我想根据标题应用特定的排序顺序。我将如何排序此菜单，而不是：

网站1，网站2，网站3，网站4

我们获得站点3，站点2，站点4，站点1

    <div class='navGroup' >
    <ul class='navSites'>
      <li>
        <a>Site 1</a><span class='exSpand'>[+]</span>
          <ul class='navSecondLevelSite'>
              <li><a href='/Home.aspx' >Home</a></li>
              <li><a href='/feedback.aspx' >Feedback</a></li>
              <li><a href='/OfficesMaps.aspx' >Offices Maps & Meeting Rooms</a></li>
              <li><a href='/SystemAlerts.aspx' >System Alerts</a></li>
          </ul>
        </a>
      </li>
      <li>
        <a>Site 2</a><span class='exSpand'>[+]</span>
          <ul class='navSecondLevelSite'>
              <li><a href='/Page1.aspx' >Page1</a></li>
              <li><a href='/Page2.aspx' >Page2</a></li>
              <li><a href='/Page3.aspx' >Page3</a></li>
          </ul>
        </a>
      </li>
      <li>
        <a>Site 3</a><span class='exSpand'>[+]</span>
          <ul class='navSecondLevelSite'>
              <li><a href='/Page1.aspx' >Page1</a></li>
              <li><a href='/Page2.aspx' >Page2</a></li>
              <li><a href='/Page3.aspx' >Page3</a></li>
          </ul>
        </a>
      </li>
      <li>
        <a>Site 4</a><span class='exSpand'>[+]</span>
          <ul class='navSecondLevelSite'>
              <li><a href='/Page1.aspx' >Page1</a></li>
              <li><a href='/Page2.aspx' >Page2</a></li>
              <li><a href='/Page3.aspx' >Page3</a></li>
          </ul>
        </a>
      </li>
    </ul>
</div>

小提琴：

http://jsfiddle.net/Colbs/UyDLL/

Answer 1

这是一种需要基于文本的数组的方法。它会删除所有元素，并按照数组

定义的顺序追加它们

var navOrder=['Site 3','Site 2','Site 4','Site 1'];
var $nav=$('.navSites');
/* detach the list items */
var $items=$nav.children().detach();
/* loop over navOrder array */
$.each(navOrder, function(_, txt){
    $items.filter(function(){
        return $(this).children('a').text() == txt;
    }).appendTo($nav);/* append list item that matches array element value*/
});

的 DEMO

在HTML导航上自定义jQuery排序。如何根据标题订购元素？

1 个答案: