Question

I want to apply some CSS to text that I can’t get marked up in spans. So for example:

<li><a href="google.com">This is marked up</a> and this is not </li>

I want to select, with either CSS (preferably) or jQuery this bit: and this is not. Maybe there’s a method of selecting the entire li then excluding a, that seems like a bypass.

The reason why I can’t get it marked up is because I’m using WP and prefer to do that rather than dig into endless lines of PHP code. Thanks a lot for the help.

EDIT:
What I want to do is apply a “display: none” to that bit of text I want to select. I can’t do:
li {display: none; } because that’ll take the whole thing off, even when I do

li a {display: inline; }

that’s why I was looking for a method to choose only that text specifically.

And I have plenty of those on the page.

Answer 1

//assuming that you have only one li element

var a_text = $('li > a').text();  
var li_text = $('li').text().replace(a_text,'');

$('li').html($('li').html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));

for more then one element:

//assuming more then one

$('li').each(function(){
    var a_text = $(this).children('a').text();  
    var li_text = $(this).text().replace(a_text,'');

    $(this).html($(this).html().replace(li_text,'<span style="background:#000;color:#fff">'+li_text+'</span>'));
});

cheers,
/marcin