Bagaimana saya bisa menambahkan div id dari divisi yang dipilih dan menambahkannya ke divisi itu sendiri?

Inilah yang saya coba:

$(".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>

Ketika saya menggunakan $(".trialID").attr("id"); di konsol browser, itu berfungsi ...

Apakah ada cara untuk mencapai ini dengan CSS??

1
YourPalNurav 31 Oktober 2019, 11:53

3 jawaban

Jawaban Terbaik

Anda harus mengulangi semua elemen $('.showID') yang dipilih dengan 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 Arguelles 31 Oktober 2019, 09:11

Masalah Jquery

Jadi jquery Anda perlu mengulang kelas .showID atau .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>

Masalah CSS

Menjawab css, tidak ada cara untuk mendapatkan atribut id secara dinamis. Tetapi Anda dapat melakukan sesuatu seperti ini di mana ia bisa mendapatkan id yang dimulai dengan karakter tertentu:

div[id^="id_"].showID { color: red; }

Anda dapat menambahkan judul ke div menggunakan JS/jQuery dan kemudian memutuskan untuk menampilkannya atau tidak menggunakan CSS

Lihat di bawah:

$(".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 Oktober 2019, 09:26

Seperti yang saya pahami, Anda dapat melakukan tugas ini menggunakan jQuery, tetapi tidak yakin apakah Anda ingin melakukannya sepenuhnya menggunakan CSS.

Masalah dengan kode Anda adalah $(this) tidak merujuk ke elemen saat ini. Anda perlu mengulang div yang dipilih dan menambahkan ID secara manual ke dalamnya. Anda dapat merujuk ke elemen saat ini menggunakan $(this) lalu.

$(".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 Oktober 2019, 08:59