caractères Insérer dans un lien - ciblant des niveaux spécifiques

Question

j'ai une liste qui est générée par Wordpress (je ne peux pas le changer):

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

J'ai alors une jquery qui met des balles et des tirets dans les niveaux spécifiques:

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

Il met les balles en bien au niveau 2 liens et les tirets aller in fine au niveau 3. Comment puis-je dire que je ne veux pas les tirets à ajouter au niveau 3 liens aussi ... ce qui est ce qu'il fait actuellement!

Au moment où il affiche - • Niveau 3, je veux seulement pour montrer - Niveau 3 Page

Answer 1

fixe avec:

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

Answer 2

liste

qui est généré par Wordpress (je ne peux pas le changer)

Le fait que cette liste soit générée par Wordpress ne signifie pas que vous ne pouvez pas le changer. Cette façon de "penser" provoque une très mauvaise pratique, en utilisant javascript/jquery juste pour ajouter un élément "visuel" au document est une mauvaise pratique en effet.

Quoi qu'il en soit, même si vous ne voulez pas modifier le code HTML, pourquoi ne pas utiliser css que son seul but est styling le document?

MISE À JOUR Je ne comprends pas pourquoi le downvote, de toute façon, voici un jsFiddle pour démontrer ma réponse:

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

code:

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

Answer 3

Utilisez le parent de la liste comme référence:

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

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

fiddle(remarque: je corrige le balisage d'origine du Q, WP ne génère pas de balisage non valide)

en va de même pour la solution jQuery, mais sans le pseudo-sélecteur ::after. Il est également possible sans utiliser le parent, mais je pense que cela rend le code moins lisible:

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

Answer 4

Mon approche serait quelque peu différente (et, espérons plus extensible si vous voulez appliquer des marqueurs plus tard):

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

Références:

• JavaScript PLAIN:
  • Object.hasOWnProperty().
• jQuery:
  • each().
  • parents().
  • text().