通过它的最后两个字符来定位元素

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-ends-with([attribute$="value"])选择器.
• filter().