2011-09-08 51 views
3

如何匹配當前父元素之前的元素。jQuery查找先前的非祖先元素

.parents('form').closest()沒有做這項工作,因爲它不是祖先元素

.prev()不工作,因爲它不是一個兄弟

HTML例如:

<div class="somerandomname"> 
    <div class="contents"> 
     <h3 class="title">sadois</h3> 
     <strong>strong</strong> 
     <h3 class="nottitle">osdjia</h3> 

     <div class="sod"> 
      <p class="paragraph"> 
       <a class="link1" href="#">link 1</a> 
       <a class="link2" href="#">link 2</a> 
       <a class="link3" href="#">link 1</a> 
      </p> 
     </div> 
    </div> 
</div> 

相關的js :

$('p>a').hover(function(){ 
    $(this).closest('strong').css({'background': 'red'}); 
}, function(){ 
    $(this).closest('strong').css({'background': 'transparent'}); 
}); 

jsFiddle

+1

什麼是你正在討論的'current',你想在提供的html中選擇什麼? –

+0

根據他的例子,他想要選擇強大的時候懸停在一個鏈接 – Andy

回答

1

我想你必須假設你知道一些文檔結構。例如:

$("strong", $(this).closest('div.container')).css({'background': 'red'}); 

我不相信有一種假設遍歷的方法,因爲它會上升。

2

這是你想要做什麼?

$(this).closest('.sod').siblings('strong') 

http://jsfiddle.net/D3xBz/1/


,你可以這樣做的還有:

$(this).closest('.contents').find('>strong') 

假設.contents DIV存在於你的實際代碼

+0

這就是它,但有一種不同的方法...... HTML是完全不同的,所以我不能依靠'div.sod' – Teneff

+1

是啊,它是當問題中的代碼與實際代碼完全不同時很難想出解決方案 – Andy

0

嘗試

$(this).closest()

這將工作在父樹上,並返回最接近你想要的值。

+0

再次閱讀問題:''.closest()'因爲它不是祖先元素而沒有執行作業「 –

+0

find()? http://api.jquery.com/find/ –

+0

'find'以相反的方式工作,它尋找後代元素。這在這種情況下也無濟於事。然而,「最接近」的組合(以獲得'。somerandomname'),然後'find'(獲取所需的元素)*可以*工作,這取決於OP實際正在做什麼。 –

1

可以使用closest()到祖先<div>元件暴露sod類匹配,則使用prevAll():last選擇前述<strong>元件匹配:

$("p > a").hover(function() { 
    $(this).closest(".sod") 
      .prevAll("strong:last") 
      .css("background", "red"); 
}, function() { 
    $(this).closest(".sod") 
      .prevAll("strong:last") 
      .css("background", "transparent"); 
}); 

更新撥弄here