Question

我有一个jQ：

$(function() {
    if($('span').css('color')=='rgb(250, 0, 0)' ||
       $('span').css('color')=='#fa0000') {
         $('span').before('hello ');
       }
});

它适用于这个html：

<span style="color: #fa0000">Ann</span>

但它无效：

<span><span style="color: #fa0000">Ann</span></span>

Answer 1

您的选择器很好，但.css的工作方式是它会“弹出”堆栈中的第一个元素并使用它。因为您有嵌套的跨度，所以只接收第一个标记，忽略嵌套的跨度。

尝试使用.each()或更改选择器

在行动中（Demo）

<span style="color:#FF00FF;">
    <span style="color:#fa0000">
        Brad Christie
    </span>
</span>

$(function(){
    var spanColor = $('span').css('color');

    // You'll notice the color shown is that of the first span (#FF00FF) and
    // not of the nested one because .css() takes the first element that matched
    // and returns the color of that element.
    $('body').append(spanColor); // output: rgb(255,0,255)

});

Answer 2

当您致电.css('color')时，它只会获得第一个跨度的颜色。您想检查每个跨度的颜色。试试这个：

$('span').each(function() {
    var $this = $(this);
    var color = $this.css('color');
    if (color == 'rgb(250, 0, 0)' || color == '#fa0000') {
        $this.before('hello ');
    }
})

演示：http://jsfiddle.net/y7nVZ/

Answer 3

Brad的答案涵盖了当前代码无效的原因 - 您需要使用.each()来迭代每个元素。您还可以使用jQuery.Color v2.0b1来帮助进行颜色检测，并执行以下操作：

$('span').each(function() {
  if ($.Color(this, 'color').is("#fa0000")) { 
    $(this).before('hello');
  }
});

请参阅jsFiddle demo

Answer 4

试试这个：

$(function(){
  if($('span:first-child').css('color')=='rgb(250, 0, 0)'||$('span:first-child').css('color')=='#fa0000'){
    $('span').before('hello ');
  }
})

如果要对嵌套范围进行着色，也可以使用children方法。

帮我编辑这个jquery

4 个答案:

在行动中（Demo）