如何选择未用CSS / jquery标记的文本?

时间:2010-03-23 11:55:12

标签: jquery css text

我想将一些CSS应用于我无法在跨度中标记的文本。例如:

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

我想用CSS(最好)或jQuery选择这个位:and this is not。也许有一种方法可以选择整个li然后排除a,这似乎是旁路。

我无法将其标记的原因是因为我使用WP并且更喜欢这样做而不是深入研究PHP代码。非常感谢您的帮助。

修改 我想要做的是对我要选择的那段文本应用“display:none”。我做不到: li {display: none; }因为即使我做了

,也会把整个事情都取消
li a {display: inline; }

这就是为什么我一直在寻找一种方法来专门选择那个文本。

我的页面上有很多这些。

3 个答案:

答案 0 :(得分:3)

//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>'));

对于多个元素:

//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>'));
});

欢呼声, /马尔钦

答案 1 :(得分:1)

我认为没有办法做到这一点,至少不使用CSS。执行此操作的最安全方法是将所有需要的样式应用于li元素:

li { font-size: 18px; ... }

并在a元素中否定您不想要的所有内容:

li a { font-size: 16px; ... }

(您可能希望使用比lia更具体的选择器,可以在前面添加父类的名称。

使用JQuery,你当然可以在“未标记”区域周围包裹一个新标签,但这很复杂,并且在关闭JS时不起作用。我不会这样做。

答案 2 :(得分:0)

是否可以将样式应用于li元素,然后使用应用于a元素中li元素的样式覆盖该影响。

也许创建以下样式;

li.myListElements { color: #FFF; }
li.myListElements a { color: #F00; font-weight: bold; }

调整标记;

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