javascript - 使用 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

Closest 查找与选择器匹配的最接近的父级。您想要使用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 父级，然后找到其中的轮播。