Question

我正在尝试在div中突出显示第一个带有'main'类的链接，如果没有，只需突出显示第一个链接

即：

<div class="group1">
 <a href="product1">product1</a>
 <a href="product2" class="main">product2</a>
 <a href="product3">product3</a>
</div>

<div class="group2">
 <a href="product1">product1</a>
 <a href="product2">product2</a>
 <a href="product3">product3</a>
</div>

因此group1 product2会突出显示，group2会product1

现在我这样做：

 obj=$('.group2 a.main').first();
 if (obj.length==0) {obj=$('.group2 a').first();}
 obj.css('color','red');

但我想知道是否有更紧凑的方法来做到这一点。

$('.group1 a.main,.group1 a').first().css('color','red')

不起作用，因为jquery按文档顺序返回元素并且会产生错误的结果

Answer 1

尝试

 obj=$('.group2 a.main').eq(0).css({'color':'red'});

或

obj=$('.group2 a.main').eq(0).style('color','red');

Answer 2

首先使用伪类：

$('.group2 a.main:first').css({'color':'red'});

或者使用变量应该是：

$obj = $('.group2 a.main:first');
if(!$obj.length)
    $obj = $('.group2 a:first');
$obj.css('color','red');

如果你需要在每个组上执行此操作，那么将给出：

$('div[class^=group]').each(function(i, e) { 
    $obj = $(e).find('a.main:first');
    if(!$obj.length)
        $obj = $(e).find('a:first');
    $obj.css('color','red');
});

请参阅此fiddle。

Answer 3

$(function(){  
    // Iterating over each div
    $('div').each(function(){  

       if($(this).find('a.main:first').length){
         // If any hyperlink with class main is present
         $(this).find('a.main:first').css({'color':'red'});
       }else{
         // Select any hyperlink
         $(this).find('a:first').css({'color':'red'});
       }

    });   
 });

Live Demo

Answer 4

$('div[class^=group] a')
    .filter(':has(a.main) a.main, :not(:has(a.main)) a:first-child')
    .css({color:'red'})

如此处所示：http://jsfiddle.net/6AWmq/2/

Answer 5

试试这个：

var obj = $('div[class^="group"]');
obj.each(function(){
   if($('a',this).hasClass('main')){
      $('.main').css('color','red');
   }else{
      $('a:first',this).css('color','red');
   }
});

选择具有指定类的第一个元素，如果没有，则选择另一个元素

5 个答案:

FIDDLE