CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YourPalNurav
YourPalNurav

Reputation: 1310

How to prepend div id to div using jQuery?

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??

Upvotes: 1

Views: 249

Answers (3)

designtocode
designtocode

Reputation: 2245

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>

Upvotes: 1

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

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>

Upvotes: 2

31piy
31piy

Reputation: 23859

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 divs 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>

Upvotes: 1

Related Questions