javascript - 无法定位具有 id 的特定元素的父级

Question

我正在处理这个演示代码。为什么我无法使用 id 定位特定元素的父级？我想将类添加到具有的元素active的父级aid#map

$("#map .nav-tabs>li>a").parent().addClass('active');
$("#map .nav-tabs li>a").parent().addClass('active');

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs">
  <li><a id="map"> Map</a></li>
  <li><a id="tap"> Tap</a></li>
  <li><a id="app"> App</a></li>
</ul>

标签： javascriptjquery

Answer 1

您可以使用.closest()而不是.parent()以获得更多面向未来的灵活性

$(".nav-tabs>li>a").closest("#map, #app").addClass('active');

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs">
  <li><a id="map"> Map</a></li>
  <li><a id="tap"> Tap</a></li>
  <li><a id="app"> App</a></li>
</ul>

但由于 ID 是唯一的，您可以直接定位您的 ID

$("#map, #app").addClass('active');

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs">
  <li><a id="map"> Map</a></li>
  <li><a id="tap"> Tap</a></li>
  <li><a id="app"> App</a></li>
</ul>

这让我觉得你实际上是在问一个 XY 问题——你的实际需要是在点击或类似的情况下定位父母：

$(".nav-tabs").on("click", ".nav-tabs-tab", function() {
  $(this).addClass("active");
  // or 
  // $(this).closest("li").addClass("active");
  // or
  // $(this).closest("desiredSelector").addClass("active");
  // you got the point
});

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav-tabs">
  <li><a class="nav-tabs-tab">Map</a></li>
  <li><a class="nav-tabs-tab">Tap</a></li>
  <li><a class="nav-tabs-tab">App</a></li>
</ul>