0

我有一个由 Wordpress 生成的列表（所以我无法更改它）：

<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
   <ul class="children">
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
         <ul class="children">
            <li><a href="#">Level 3</a></li>
            <li><a href="#">Level 3</a></li>   
         </ul>
   </ul>
</ul>

然后我有一些 jquery 将项目符号和破折号放在特定级别内：

<script>
jQuery(function($) {
$(document).ready(function() {    
    $('ul.children li a').prepend('&#8226; ');
    $('ul.children li ul.children a').prepend('&#45; ');        
});
});
</script>

它使项目符号在 2 级链接上很好，而破折号在第 3 级上很好。我怎么能说我不希望将破折号也添加到 3 级链接......这就是它目前可以！

目前显示 - • 第 3 级，我只想显示 - 第 3 级页面

4

4 回答 4

0

由 Wordpress 生成的列表（所以我无法更改它）

此列表由 Wordpress 生成的事实并不意味着您无法更改它。这种“思考”方式导致了一种非常糟糕的做法，使用javascript/jquery只是在文档中添加“视觉”元素确实是一种不好的做法。

无论如何，即使您不想更改 HTML，为什么不使用css它的全部目的是styling文档呢？

更新 我不明白为什么不赞成，无论如何，这是一个 jsfiddle 来证明我的答案：

http://jsfiddle.net/hWfNy/1/

代码：

ul.children li a:before { content: '\2022\00a0 '}
ul.children > ul.children li a:before{ content: '\2D\00a0 ' }
于 2013-09-03T14:11:10.917 回答
0

使用列表的父级作为参考：

.parent > ul > li > ul > li > a::before{
  content: '•';
}

.parent > ul > li > ul > li > ul > li > a::before{
  content: '-';
}

小提琴 （注意：我更正了 Q 中的原始标记，WP 不会生成无效标记）

这同样适用于 jQuery 解决方案，但没有::after伪选择器。不使用父级也是可能的，但我认为这会降低代码的可读性：

ul:not(.children) > li > ul > li > a::before { ... } 
ul:not(.children) > li > ul > li > ul > li > a::before { ... }
于 2013-09-03T14:19:13.190 回答
0

我自己的方法会有所不同（如果您以后想应用不同的标记，希望可以扩展性更好）：

// defining the markers to apply to each 'level':
var levelPrefixMap = {
    '1': '',
    '2': '• ',
    '3': '- '
};

// selecting all the 'a' elements, iterating over them:
$('a').each(function () {
    // we're using '$(this)' a few times, caching to save time
    var self = $(this),
        // gets the number of parents as a proxy for the 'depth'/'level':
        level = self.parents('ul').length;
    // changing the text of the current 'a' element:
    self.text(function(i,t){
        /* if we have a marker set for this 'level', we return that and the text,
           otherwise we just return the text:
        */
        return levelPrefixMap.hasOwnProperty(level) ? levelPrefixMap[level] + t : t;
    });
});

JS 小提琴演示。

参考：

于 2013-09-03T14:19:29.293 回答
0

固定：

<script>
jQuery(function($) {
$(document).ready(function() {    
   $('ul.children').has('ul').children('li').children('a').prepend('&#8226; '); //Bullets on level 2
   $('ul.children ul.children').children('li').children('a').prepend('&#45; '); //Dashes on level 3
});
});
</script>
于 2013-09-03T14:31:00.013 回答