看看我这个js能优化吗？

[yaganblw]

页面结构

<dl id="food">
    <dt>蔬菜</dt>
    <dd><a href="radish.html">萝卜</a></dd>
    <dd><a href="cabbage.html">大白菜</a></dd>
    <dt>水果</dt>
    <dd><a href="apple.html">苹果</a></dd>
    <dd><a href="banana.html">香蕉</a></dd>
    <dd><a href="orange.html"></a>橘子</dd>
    <dt>肉类</dt>
    <dd><a href="pork.html">猪肉</a></dd>
    <dd><a href="beef.html">牛肉</a></dd>
<dl>

需求：这是一个多级分类导航，点击某个子分类比如“苹果”时，我希望处于这个分类（水果）的栏目是打开的，而其它是隐藏的。参考CSDN论坛左侧的菜单导航。
然后我是这样做的

$(function () {
    var nav = $("#food > dt");
    nav.nextUntil("dt").hide();
    var url = location.href.substr(location.href.lastIndexOf("/") + 1);  //获取当前页url尾部
    url = url.replace("#", "");  //删除url中的锚点
    if (url != "") {
        $("#food dd a[href='" + url + "']").parents("dd").prevAll("dt").eq(0).nextUntil("dt").show();
    }
});

功能可以实现，但是效率是不是很差？不知道我说清楚了没有？

[yaganblw]

没人吗？人工顶起

[豪情]

感觉这个结构操作起来不是很灵活,参考一下这个：

<div id="food">
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
    <h1>蔬菜</h1>
    <div class="sub">
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
        <a href="radish.html">萝卜</a>
    </div>
</div>

[fzfei2]

用正则替换，效率应该是没问题的

 <dl id="food">
    <dt>蔬菜</dt>
    <dd><a href="radish.html">萝卜</a></dd>
    <dd><a href="cabbage.html">大白菜</a></dd>
    <dt>水果</dt>
    <dd><a href="apple.html">苹果</a></dd>
    <dd><a href="banana.html">香蕉</a></dd>
    <dd><a href="orange.html"></a>橘子</dd>
    <dt>肉类</dt>
    <dd><a href="pork.html">猪肉</a></dd>
    <dd><a href="beef.html">牛肉</a></dd>
</dl>
 
<script>
  
  $(function () {
    $("#food > dd").hide();
    var url=location.href.match(/(\w+\.\w+)([?#].+)?$/)[1] ;
    var html=$("#food").html().split(/(?=<dt>)/i);
    va htmls=$.map(html,function(v,i){
        return v.indexOf(url)!=-1? v.replace(/<dd[^>]+>/ig,'<dd style="display:block">'):v;
    });
    $("#food").html( htmls.join('') );
 
});
</script>

[yaganblw]

引用 3 楼 fzfei2 的回复:

用正则替换，效率应该是没问题的 XML/HTML code?1234567891011121314151617181920212223242526 <dl id="food"> <dt>蔬菜</dt> <dd><a href="radish.html">萝卜</a></dd> <dd><a href="cabbage.html">大白菜</a></dd……

[yaganblw]

引用 2 楼 jikeytang 的回复:

感觉这个结构操作起来不是很灵活,参考一下这个： XML/HTML code?1234567891011121314151617181920<div id="food"> <h1>蔬菜</h1> <div class="sub"> <a href="radish.html">萝卜</a> <a href="radish.html">……

没办法，美工设计的结构

[fzfei2]

var htmls=$.map(html,function(v,i){ ==> var htmls=$.map(html,function(v,i){ 少了个r

  $(function () {
    $("#food > dd").hide();
    var url=location.href.match(/(\w+\.\w+)([?#].+)?$/)[1] ;
    var html=$("#food").html().split(/(?=<dt>)/i);
    var  htmls=$.map(html,function(v,i){
        return v.indexOf(url)!=-1? v.replace(/<dd[^>]+>/ig,'<dd style="display:block">'):v;
    });
    $("#food").html( htmls.join('') );
  
});

[豪情]

引用 5 楼 yaganblw 的回复:

引用 2 楼 jikeytang 的回复:感觉这个结构操作起来不是很灵活,参考一下这个： XML/HTML code?1234567891011121314151617181920<div id="food"> <h1>蔬菜</h1> <div class="sub"> <a href="radish.html">萝卜</a> <……

引用 5 楼 yaganblw 的回复:

引用 2 楼 jikeytang 的回复:感觉这个结构操作起来不是很灵活,参考一下这个： XML/HTML code?1234567891011121314151617181920<div id="food"> <h1>蔬菜</h1> <div class="sub"> <a href="radish.html">萝卜</a> <……

美工只是提供设计稿，html结构还需要js交互，所以这个完全可以自己来改。 让美工重构一下css就行。这个可以跟他沟通，解释。

[001007009]

html结构没问题 初始化隐藏dd，可以用css来做 #food dd { display:none; }

[yaganblw]

引用 8 楼 calmcrime 的回复:

html结构没问题 初始化隐藏dd，可以用css来做 #food dd { display:none; }

请问，页面结构不变的话，你觉得有更好的元素检索方式吗？