Jquery:链接的第一个单词颜色跨度问题
Jquery:链接的第一个单词颜色跨度问题
提问于 2015-01-18 11:14:02
当作为链接时，我和第一个单词有问题，单词看起来不正常。
$('h3')
.each(function () {
var h = $(this).html();
var index = h.indexOf(' ');
if (index == -1) {
index = h.length;
}
$(this).html('<span style="color:#fff;">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
});
当没有出现时，h3标记中的链接看起来很好
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-18 11:42:27
不能在span元素中使用颜色来设置标记中的颜色。您需要在标签本身中设置颜色：
$('h3').each(function () {
if($(this).contents().first().is('a')){
$(this).contents().first().css('color','#fff');
}else {
var node = $(this).contents().filter(function(){
return this.nodeType == 3;
}).first();
var text = node.text();
var first = text.slice(0, text.indexOf(" "));
node[0].nodeValue = text.slice(first.length);
node.before('<span style="color:#fff">' + first + '</span>');
}
});h3{
background: #f00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><a>test</a> word</h3>
<h3>test word</h3>
从here获取的第一个单词选择器的代码。
Stack Overflow用户
发布于 2015-01-18 11:26:58
尝试一下这样的方法：http://jsfiddle.net/jnmwyagy/2/
<h3><a href="#">google</a><p><span class="text">First</span> Word</p></h3>
<h3><a href="#">google</a><p><span class="text">First</span> Word</p></h3>jQuery
$('h3')
.each(function () {
$(this).find('.text').css("color", "red");
});Stack Overflow用户
发布于 2015-01-18 11:31:59
尝试搜索打开的a标记，而不是空格。
$('h3').each(function () {
var h = $(this).html();
var index = h.indexOf('<a');
if (index == -1) {
index = h.length;
}
$(this).html('<span style="color:#fff;">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
});说真的，最好将CSS样式应用于h3 a 和a标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28009055
复制相关文章
相似问题
腾讯云开发者
