Eine ID anzeigen als: nach einer KLASSE?

Question

#fp-nav{display:none} 
 
.submenu:after{content:"I WANT #fp-nav HERE"}

<div class="submenu"> </div> 
 
<div id="fp-nav">01/52</div>

Lassen Sie sie sagen, dass ich einen ID-Zähler habe, die jeden Abschnitt Änderung aktualisiert: 01/XX, 02/xx und so weiter ...

Wie kann ich die ID aus dem versteckt Seite und lassen Sie es erscheinen als: nach einer KLASSE?

Danke!

Answer 1

Nicht sicher, ob ich habe, was Sie erreichen wollen, wie Epascarello sagt, ist es unklar!

body{ 
 
    counter-reset: paragraph; 
 
} 
 
p::before { 
 
    counter-increment: paragraph;     
 
    content: "Paragraph " counter(paragraph) ": "; 
 
}

<p>Name</p> 
 
<p>Last Name</p> 
 
<p>Phone #</p> 
 
<p>Address</p>

Answer 2

Sie können die Stileigenschaften von CSS-Regeln über die styleSheets collection manipulieren:

// Get the rule's stylesheet and index 
 
let ruleIndex = -1; 
 
let sheet = null; 
 
let sheetRules = null; 
 
Array.from(document.styleSheets).some(s => Array.from(s.rules || s.cssRules).some((rule, index) => { 
 
    if (rule.selectorText == ".foo::after") { 
 
    sheet = s; 
 
    sheetRules = sheet.rules || sheet.cssRules; 
 
    ruleIndex = index; 
 
    return true; 
 
    } 
 
})); 
 

 
// Update it periodically 
 
let id = 0; 
 
setInterval(() => { 
 
    ++id; 
 
    sheet.deleteRule(ruleIndex); 
 
    ruleIndex = sheet.insertRule('.foo::after { content: "' + id + '"; }', ruleIndex); 
 
}, 250);

.foo::after { 
 
    content: 'foo'; 
 
}

<span class="foo"></span>

Sie verwendet der Lage sein, einer Regel Stileigenschaften zu ändern , aber sie wurden schreibgeschützt, also musst du jetzt entfernen die alte Regel und füge eine neue hinzu.

Answer 3

eine Lösung durch JQuery Es ist, können Sie nicht in der Lage sein Pseudo-Klasse zielen wie: nach, aber sie wäre in der Lage es im Untermenü div-Tag

//get value from the id 
var k = $('#fp-nav').text(); 

// remove the element 
$('#fp-nav').remove(); 
//add the value inside submenu i just gave it a class value you can change it as per your need 
$(".submenu").append("<div class='idval'>"+k +"</div> ");