选择以特定div内的某些内容结尾的id

Question

<div id="mydiv">
    <div id="abcdiv">yes div</div>
    <div id="defdiv">yes div</div>
    <div id="ijkdiv">yes div</div>
    <div id="notthisone">No div</div>
</div>
<div id="xyzdiv">No div</div>

我只需要选择以ID为"div"结尾的div，并且只选择<div id="mydiv">

内的div

在这种情况下，我的输出应该只是以下div

<div id="abcdiv">yes div</div>
<div id="defdiv">yes div</div>
<div id="ijkdiv">yes div</div>

而不是

<div id="notthisone">No div</div> and <div id="xyzdiv">No div</div>

Answer 1

您可以使用[attr$=value] attribute selector

  

表示属性名称为attr的元素，其值后缀为＆＃34; value＆＃34;。

＆＃13;

＆＃13;

#mydiv div[id$="div"] {
  background: lightblue;
}

＆＃13;

<div id="mydiv">
  <div id="abcdiv">yes div</div>
  <div id="defdiv">yes div</div>
  <div id="ijkdiv">yes div</div>
  <div id="notthisone">No div</div>
</div>
<div id="xyzdiv">No div</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在此背景下使用attribute ends with selector，

var elem = $("#mydiv div[id$='div']");

DEMO

上面的选择器也是一个有效的css选择器。你也可以在css中使用它。

#mydiv div[id$='div'] {
 color : red;
}

但请注意，此选择器将在引擎盖下使用正则表达式。当您在具有100多个元素的dom中运行此选择器时，这可能会消耗性能。因此，更好的方法是使用类来区分所需元素和其他元素。像，

<div id="mydiv">
    <div id="abcdiv" class="yes">yes div</div>
    <div id="defdiv" class="yes">yes div</div>
    <div id="ijkdiv" class="yes">yes div</div>
    <div id="notthisone">No div</div>
</div>

选择器就像，

#mydiv div.yes {
 color :red;
}

Answer 3

div#mydiv div[id$=div]符合您的所有条件：

• 元素必须位于ID为<div>
的mydiv内
• 元素必须是<div>本身
• 元素的ID必须以div
结尾

演示

div#mydiv div[id$=div] {
    background: green;
}

<div id="mydiv">
    <div id="abcdiv">yes div</div>
    <div id="defdiv">yes div</div>
    <div id="ijkdiv">yes div</div>
    <div id="notthisone">No div</div>
    <section id="notadiv">Not a div</section>
    <section id="notadiv">
       Also not a div
       <div id="inceptiondiv">inception</div>
    </section>
</div>
<div id="xyzdiv">No div</div>