javascript - 如何使用 jQuery 将 div id 添加到 div？

Question

如何添加所选部门的 div id 并将其添加到部门本身？

这是我尝试过的:

$(".showID").prepend("<h4>" + $(this).attr("id") + "</h4>");

console.log( $(".trialID").attr("id") ); /*Why does this work?*/

div{
  background:royalblue; color:#ddd;
  padding:2rem;margin-bottom:1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foobar" class="showID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="loremIpsum" class="showID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="helloWorld" class="noID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="JonSkeet" class="showID trialID">
  Hello
  <p>This is a sample paragraph.</p>
</div>

当我在浏览器控制台中使用 $(".trialID").attr("id"); 时它确实有效...

有没有办法用 CSS 实现这个？

Answer 1

您必须使用 jQuery.each() 遍历所有选定的 $('.showID') 元素:

$.each($('.showID'), function () {
  $(this).prepend($('<h4>').text($(this).attr('id')))
})

div{background:royalblue; color:#ddd;padding:2rem;margin-bottom:1rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foobar" class="showID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="loremIpsum" class="showID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="helloWorld" class="noID">
  Hello
  <p>This is a sample paragraph.</p>
</div>
<div id="JonSkeet" class="showID trialID">
  Hello
  <p>This is a sample paragraph.</p>
</div>