How to prepend div id to div using jQuery?

Question

How can I add div id of a selected division and prepend it to the division itself?

Here's what I tried:

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

When I use $(".trialID").attr("id"); in browser console it does work...

Is there a way to achieve this with CSS??

Answer 1

You have to iterate over all selected $('.showID') elements with 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

As I understand, you can do this task using jQuery, but not sure whether you want to do it entirely using CSS.

The problem with your code is that $(this) doesn't refer to the current element. You need to loop through the selected div s and manually prepend the IDs to those. You can refer to the current element using $(this) then.

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

Answer 3

Jquery issue

So your jquery needs to loop through the class .showID or .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 issue

Answering the css, there's no way to dynamically get the id attribute. But you can do something like this where it can get the id that starts with specific characters:

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

You can add the heading to the divs using JS/jQuery and then decide to show it or not using CSS

See below:

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