javascript - jquery 选择器元素 id 中的小数位

Question

html代码是

<div class="content" id="content-27" data-id="27"> <h3 class="subsectionHead">
<span class="titlemark">26.1</span> 
<a id="x1-2800026"></a>Header and Footer for all pages</h3>

以下 jquery 代码有效并返回 27 作为 id。

$("#x1-2800026").closest("div").attr("id");

现在如果 html 是

<div class="content" id="content-27" data-id="27"> <h3 class="subsectionHead">
    <span class="titlemark">26.1</span> 
    <a id="x1-2800026.1"></a>Header and Footer for all pages</h3>

以下 jquery 代码不起作用...它返回未定义

$("#x1-2800026.1").closest("div").attr("id");

唯一的区别是小数点位置。第一种情况下的 id 为 #x1-2800026，第二种情况下的 id 为 #x1-2800026.1 这个额外的小数位似乎导致了问题。怎么解决这个问题？

Answer 1

由于选择器是一个 id，我们可以合理地假设属性选择器将为我们提供仅包含一个元素的集合。如果不是，您需要更正 html。

console.log($("[id='x1-2800026.1']").closest("div").attr("id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content" id="content-27" data-id="27"> <h3 class="subsectionHead">
    <span class="titlemark">26.1</span> 
    <a id="x1-2800026.1"></a>Header and Footer for all pages</h3>
    </div>