jQuery的DOM遍歷

Question

有了這個標記

<div class="col-md-3">
  <div id="carousel-race-track">
    <%= image_tag 'race_track/track_curved.jpg', data: { engine: 'Sports'}  %>
    <%= image_tag 'race_track/track_hills.jpg', data: { engine: 'Hills'}  %>
    <%= image_tag 'race_track/track_rough.jpg', data: { engine: 'Rough'}  %>
    <%= image_tag 'race_track/track_straight.jpg', data: { engine: 'Straight'}  %>
  </div>
  <p class="lead"><a class="btn btn-lg btn-info select">Select</a></p>
</div>

例如，當我單擊.select ，如何遍歷DOM才能到達div #carousel-race-track ？

我將有多個輪播，因此將對id搜索進行通配符，並以carousel-為前綴。

我試圖說這樣的話：

$('.select').on('click', function(e){
  e.preventDefault();
  var carousel = $(this).closest("[id^='carousel-']");
  $(carousel).cycle('pause');
});

這里closest錯誤的方法嗎？

Answer 1

最接近的查找與選擇器匹配的最接近的父級。 您想使用parent到達.lead，然后使用prev查找與選擇器匹配的前一個兄弟。

$('.select').on('click', function(e){
  e.preventDefault();
  var carousel = $(this).parent().prev("[id^='carousel-']");
  $(carousel).cycle('pause');
});

或者您可以這樣做：

var carousel = $(this).closest('.col-md-3').find("[id^='carousel-']");

這會找到最接近的.col-md-3父對象，然后在其中找到輪播。

Answer 2

$(this).parent().siblings(); 應該做的工作。

如果您有其他同級，則必須使用選擇器指定您要關注的同級。

請記住，它返回一個jQuery對象，因此您可以直接向其附加任何jQuery方法：

carousel.cycle('pause');