Question

我有一个由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级页面

Answer 1

由Wordpress生成的列表（因此我无法对其进行更改）

此列表由Wordpress生成的事实并不意味着您无法更改它。这种思维方式＆＃34;使用javascript / jquery只是为了添加一个＆＃34; visual＆＃34;文件中的元素确实是一种不好的做法。

无论如何，即使您不想更改HTML，为什么不使用css 整个目的是styling文件？

<强>更新我不明白为什么要投票，无论如何，这是一个证明我的答案的小提琴：

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

代码：

ul.children li a:before { content: '\2022\00a0 '}
ul.children > ul.children li a:before{ content: '\2D\00a0 ' }

Answer 2

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

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

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

fiddle （注意：我更正了Q中的原始标记，WP无法生成无效标记）

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

ul:not(.children) > li > ul > li > a::before { ... } 
ul:not(.children) > li > ul > li > ul > li > a::before { ... }

Answer 3

我自己的方法会有些不同（如果你想稍后应用不同的标记，希望更具可扩展性）：

// 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 Fiddle demo

参考文献：

'普通'JavaScript：
- Object.hasOWnProperty()。
jQuery的：
- each()。
- parents()。
- text()。

Answer 4

修正：

<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>

在链接中插入字符 - 定位特定级别

4 个答案: