Как добавить div id к div с помощью jQuery?

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

Вы должны перебрать все выбранные $('.showID') элементы с помощью jQuery.each () :

$.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>

Answer 2

Проблема Jquery

Таким образом, ваш jquery должен пройти цикл по классу .showID или .trialID

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

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>

Проблема CSS

Отвечая на css, нет способа динамически получить атрибут id. Но вы можете сделать что-то вроде этого, где он может получить идентификатор, который начинается с определенных символов:

div[id^="id_"].showID { color: red; }

Вы можете добавить заголовок в div, используя JS / jQuery, а затем решите показать его или нет, используя CSS

См. Ниже:

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

div{
  background:royalblue; color:#ddd;
  padding:2rem;margin-bottom:1rem;
}
div[id^="id_"].showID > h1{ display:block }
div[id^="no_"].showID > h1{ display:none }

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

Answer 3

Как я понимаю, вы можете выполнить эту задачу с помощью jQuery, но не уверены, хотите ли вы сделать это полностью с помощью CSS.

Проблема с вашим кодом состоит в том, что $(this) не относится ктекущий элемент. Вам нужно пройтись по выбранным div s и вручную добавить идентификаторы к ним. Вы можете обратиться к текущему элементу, используя $(this) затем.

$(".showID").each(function() {
  $(this).prepend(`<h4>${$(this).attr("id")}</h4>`);
});

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>