jquery - 以元素的最后两个字符为目标

Question

我有以下 HTML：

<div id="wrapper">
     <div id="a_12"></div>
     <div id="a_13"></div>
     <div id="a_14"></div>
     <div id="a_15"></div>
     <div id="a_16"></div>
     <div id="a_17"></div>
</div>

如何使用 jQuery 选择以 15 结尾的 div？

Answer 1

使用 attribute-ends-with 选择器：

$('div[id$="15"]');

$('div[id$="15"]').css('color', '#f90');

div {
  border: 1px solid #000;
  width: 50%;
  margin: 0 auto 0.5em auto;
}
div[id]::before {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="a_12"></div>
  <div id="a_13"></div>
  <div id="a_14"></div>
  <div id="a_15"></div>
  <div id="a_16"></div>
  <div id="a_17"></div>
</div>

JS 小提琴演示。

或者，您可以使用filter()：

$('div').filter(function(){
    return this.id.slice(-2) == '15';
});

$('div').filter(function() {
  return this.id.slice(-2) == '15';
}).css('color', '#f90');

div {
  border: 1px solid #000;
  width: 50%;
  margin: 0 auto 0.5em auto;
}
div[id]::before {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="a_12"></div>
  <div id="a_13"></div>
  <div id="a_14"></div>
  <div id="a_15"></div>
  <div id="a_16"></div>
  <div id="a_17"></div>
</div>

JS 小提琴演示。

或者，使用纯 JavaScript：

document.querySelector('div[id$="15"]').style.color = '#f90';

document.querySelector('div[id$="15"]').style.color = '#f90';

div {
  border: 1px solid #000;
  width: 50%;
  margin: 0 auto 0.5em auto;
}
div[id]::before {
  content: attr(id);
}

<div id="wrapper">
  <div id="a_12"></div>
  <div id="a_13"></div>
  <div id="a_14"></div>
  <div id="a_15"></div>
  <div id="a_16"></div>
  <div id="a_17"></div>
</div>

JS 小提琴演示。

甚至只使用 CSS：

div[id$="15"] {
  color: #f90;
}

div {
  border: 1px solid #000;
  width: 50%;
  margin: 0 auto 0.5em auto;
}
div[id]::before {
  content: attr(id);
}

div[id$="15"] {
  color: #f90;
}

<div id="wrapper">
  <div id="a_12"></div>
  <div id="a_13"></div>
  <div id="a_14"></div>
  <div id="a_15"></div>
  <div id="a_16"></div>
  <div id="a_17"></div>
</div>

JS 小提琴演示。

参考：

• CSS：
  • 属性选择器。
• JavaScript：
  • document.querySelector().
• jQuery：
• 属性以 ( [attribute$="value"]) 结尾的选择器。
• filter().

Answer 2

尝试在属性值上使用带有选择器的结尾：

$('#wrapper').find('[id$="15"]'); //here find on the wrapper since you never know you may have some other element with id ends with 15 on your page.

当使用带选择器的结尾时，您必须小心，因此请提供尽可能多的特异性以最终选择正确的结尾。

小提琴