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

Question

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

IE：

<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>

所以 ingroup1 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

试试这个：

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

小提琴

Answer 2

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

    });   
 });

现场演示

Answer 3

首先使用伪类：

$('.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');
});

看到这个小提琴。

Answer 4

尝试

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

或者

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

Answer 5

$('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/