Назначить идентификатор на основе класса

Question

У меня есть Html с именем класса Style1, Style2 style .... и я хочу назначить id на основе назначенного класса в статическом HTML. Я хочу назначить Id в динамическом разделе. У меня нет доступа к Dyanmic HTML, который я хочу назначить через jQuery.

Раздел статического класса.

<div id="mediafarmplugin"> 
    <div class="style1">Get External Content</div> 
    <div class="style2">Get External Content</div> 
    <div class="style3">Get External Content</div> 
    <div class="style4">Get External Content</div> 
    <div class="style...">......</div> 
</div> 

Dynamic Присвоить Id на основе класса стиля имени

<div id="table"> 
    <div id="style1">Style1 appear</div> 
    <div id="style2">Style2 appear</div> 
    <div id="style3">Style3 appear</div> 
    <div id="style...infinte number">Style... Infinate number appear</div> 
</div> 

Пожалуйста, помогите мне

Answer 1

Попробуйте что-то вроде этого: -

$(document).ready(function(){ 
     $("div").each(function(){ 
      if((this).attr('class') != undefined) 
       $(this).attr("id",$(this).attr("class")); 
     }); 

    }); 

Answer 2

Sorry о JavaScript, я не так хорошо в jQuery. Подробности указаны в коде.

Примечание: Я упомянул, что контейнеры имеют одинаковую ширину с содержанием, извините за это. Я смутил вас вопросом с другим вопросом, но, к счастью, остальная часть ответа по-прежнему относится к вашему вопросу.

$(function() { 
 
    var divs = document.querySelectorAll('#static div'); 
 
    var divArray = Array.prototype.slice.call(divs); 
 
    var dyn = document.getElementById('dynamic'); 
 
    for (var i = 0; i < divArray.length; i++) { 
 
    var klass = divArray[i].getAttribute('class'); 
 
    var klone = divArray[i].cloneNode(true); 
 
    klone.setAttribute('id', klass); 
 
    dyn.appendChild(klone); 
 
    } 
 
}); 
 

 
/* JavaScript Breakdown */ 
 
// 1. jQuery ready wrapper 
 
// 2. Make a NodeList of all divs inside of section#static 
 
// 3. Convert NodeList into an array 
 
// 4. Reference section#dynamic 
 
// 5. Iterate through divArray 
 
// 6. Retrieve each of the divs' class 
 
// 7. Clone each div 
 
// 8. Each clone get's an id based on the class of the original element 
 
// 9. Clone is appended to section#dynamic

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
section { 
 
    background: rgba(0, 0, 0, .3); 
 
    outline: 3px dashed blue; 
 
    width: -moz-fit-content; 
 
    width: -webkit-fit-content; 
 
    width: fit-content; 
 
    margin: 20px; 
 
} 
 
div { 
 
    outline: 2px solid red; 
 
    width: 100px; 
 
} 
 
p { 
 
    margin: 10px; 
 
} 
 
[id^="style"]:after { 
 
    content: ' ★'; 
 
    font-size: 20px; 
 
    color: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="static"> 
 
    <div class="style1">Get External Content</div> 
 
    <div class="style2">Get External Content</div> 
 
    <div class="style3">Get External Content</div> 
 
    <div class="style4">Get External Content</div> 
 
</section> 
 

 
<p>The sections have the width of their contents.<sup>CSS 8,9,10</sup></p> 
 
<p>The cloned divs below each has a gold star. This is proof that each clone has an id that starts with "style".<sup>CSS 17</sup> You can use the dev tools to view the clones' ids</p> 
 
<p> 
 
    <section id="dynamic"></section>