¿Cómo anteponer div id a div usando jQuery?

Question

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

javascript jquery html css

1

YourPalNurav 31 oct. 2019 a las 11:53

Answer 1

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>

2

Yosvel Quintero 31 oct. 2019 a las 09:11

Answer 2

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>

1

31piy 31 oct. 2019 a las 08:59

Answer 3

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>

1

YourPalNurav 31 oct. 2019 a las 09:26

¿Cómo anteponer div id a div usando jQuery?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript