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 Fiddle demo .

或者，您可以使用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 Fiddle demo .

或者，使用纯 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 Fiddle demo .

或者甚至只使用 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 Fiddle demo .

引用文献:

• CSS:
  • Attribute selectors .
JavaScript:
• document.querySelector() .
• jQuery:
• Attribute-ends-with ([attribute$="value"]) selector .
• filter() .