¿Cómo puedo agregar la identificación div de una división seleccionada y anteponerla a la división misma?
Esto es lo que intenté:
$(".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>
Cuando uso $(".trialID").attr("id");
en la consola del navegador funciona ...
¿Hay alguna manera de lograr esto con CSS?
3 respuestas
Debe iterar sobre todos los elementos $('.showID')
seleccionados con 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>
Según tengo entendido, puede hacer esta tarea usando jQuery, pero no está seguro de si quiere hacerlo completamente usando CSS.
El problema con su código es que $(this)
no se refiere al elemento actual. Debe recorrer los div
s seleccionados y anteponer manualmente los ID a esos. Puede referirse al elemento actual usando $(this)
entonces.
$(".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>
Problema de Jquery
Por lo tanto, su jquery necesita recorrer la clase .showID
o .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>
Problema de CSS
Respondiendo a css, no hay forma de obtener dinámicamente el atributo id. Pero puede hacer algo como esto donde puede obtener la identificación que comienza con caracteres específicos:
div[id^="id_"].showID { color: red; }
Puede agregar el encabezado a los divs usando JS / jQuery y luego decidir mostrarlo o no usando CSS
Vea abajo:
$(".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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.