CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user7791702
user7791702

Reputation: 290

Creating the dynamic style tag with the incrementing ID

About the Code

I have a code that increment the ID on each click but the problem is in css. I have a style implemented in the #dummy ID so when I click first time the style display as I have written in the css but on second, third, fourth and so on clicks it does not appear. The reason is the incrementing ID

What I want:

I want, also to create a new style tag with a new incremented ID on each click after each element and implement all the styles present in the #dummy ID.

For example :

On second click

The id will incremented as it should be that is id="dummy--1"

Under that a style tag should be some thing like this :

<style>
    #dummy--1 {
      background-color: bisque;
    }
    #dummy--1 H1 {
      color: blue;
      font-size: 20px;
    }
    #dummy--1 p {
      color: green;
      font-size: 15px;
    }
</style>

How can I achieve it.

Here is my fiddle. Please check the elements or console to see incrementing id's

UPDATED:

Sorry guys but I do not want to use div[id^="dummy"]. I just want to create a new style tag as I have mentioned above

Upvotes: 0

Views: 824

Answers (4)

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

I would advice you to use some other approach (using css like other people recommend here), but if you really want to try generate the styles manually then you can generate styles string (in the example using RegExp and placeholders) and then append it to head tag:

$array = {
  "sections": {
    "H": {
      "name": "dummy",
      "html": "<div id=\"dummy\"><h1>Some Title</h1><p>This is a para</p></div>"
    }
  }
}

var defaultStyle = "#dummy--{id} {background-color: bisque;}#dummy--{id} H1 {color: {h1-color};font-size: 20px;}#dummy--{id} p{color: green;font-size: 15px;}"

$(function() {
  // counter which holds the counts of click
  var count = -1;
  $('#cm').click(function(event) {
    $htmlData = $array["sections"]["H"]['html'];
    // check the count value for second click
    if (++count > 0)
      // in case of not a first click parse the html and generate a jQuery object
      $htmlData = $($htmlData).attr('id', function(i, v) {
        // update the attrubute value
        return v + '--' + count
        // get back the html content from the DOM object
      })[0].outerHTML
    //$('#content').html($htmlData);
    $($htmlData).appendTo('#content').hide().slideDown();
    
    var generated = defaultStyle.replace(/{id}/gi, count).replace(/{h1-color}/gi, count % 2 ? "red":"yellow");
    $("<style type='text/css'>" + generated + "</style>").appendTo("head");
  });
})
#dummy {
  background-color: bisque;
}
#dummy H1 {
  color: blue;
  font-size: 20px;
}
#dummy p {
  color: green;
  font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>

<ul id="content">
  
</ul>

Hope this idea will help you.

UPDATE: You can also try to manage your style using jQuery css() method.

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

div[id^="dummy"] will Select every element whose ID begins with dummy

div[id^="dummy"]{
  background-color: bisque;
}

Demo

Upvotes: 2

Gerard
Gerard

Reputation: 15786

Make use of styling based on attribute filtering in your CSS. Each id starting with "dummy" will be selected.

div[id^="dummy"] {
  background-color: bisque;
}

div[id^="dummy"] h1 {
  color: blue;
  font-size: 20px;
}

div[id^="dummy"] p {
  color: green;
  font-size: 15px;
}
<div id="dummy--1">
  <h1>test</h1>
</div>
<div id="dummy--2">
  <p>test</p>
</div>

Upvotes: 2

mikepa88
mikepa88

Reputation: 803

Give them a class

<div id="dummy--x" class="dummy"><h1>Some Title</h1><p>This is a para</p></div>

And apply css to that class

.dummy {  background-color: bisque; } ... etc

The other answers with the id selector will work, but that's what classes are for, not ids

Upvotes: 2

Related Questions