Bungkus teks javascript dalam span

Question

Pemilih, elemen, string HTML, atau objek jQuery yang menentukan struktur untuk membungkus elemen yang cocok. Saat Anda melewatkan koleksi jQuery yang berisi lebih dari satu elemen, atau pemilih yang cocok dengan lebih dari satu elemen, elemen pertama akan digunakan

Table of Contents Show

Bagaimana cara membungkus string dalam JavaScript?
Bagaimana Anda memecah teks span di CSS?
Apa itu bungkus teks dalam HTML?

versi ditambahkan. 1. 4

fungsi
Jenis. ( indeks ) => atau
Fungsi callback mengembalikan konten HTML atau objek jQuery untuk membungkus elemen yang cocok. Menerima posisi indeks elemen di set sebagai argumen. Di dalam fungsi, this_ mengacu pada elemen saat ini di set

Fungsi


$( ".inner" ).wrap( "<div class='new'></div>" );

0 dapat mengambil string atau objek apa pun yang dapat diteruskan ke fungsi pabrik


$( ".inner" ).wrap( "<div class='new'></div>" );

1 untuk menentukan struktur DOM. Struktur ini mungkin bersarang beberapa tingkat, tetapi harus berisi hanya satu elemen terdalam. Salinan dari struktur ini akan dililitkan di sekitar setiap elemen dalam kumpulan elemen yang cocok. Metode ini mengembalikan kumpulan elemen asli untuk tujuan rantai

Perhatikan HTML berikut

1

2

3

4


<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Menggunakan


$( ".inner" ).wrap( "<div class='new'></div>" );

_0, kita dapat menyisipkan struktur HTML di sekitar elemen


$( ".inner" ).wrap( "<div class='new'></div>" );

3 bagian dalam seperti itu

1


$( ".inner" ).wrap( "<div class='new'></div>" );

Elemen


$( ".inner" ).wrap( "<div class='new'></div>" );

_3 baru dibuat dengan cepat dan ditambahkan ke DOM. Hasilnya adalah


$( ".inner" ).wrap( "<div class='new'></div>" );

3 baru melilit setiap elemen yang cocok

1

2

3

4

5

6

7

8


<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

_

Versi kedua dari metode ini memungkinkan kita untuk menentukan fungsi callback. Fungsi callback ini akan dipanggil sekali untuk setiap elemen yang cocok; . Sebagai contoh

1

2

3


$( ".inner" ).wrap(function() {
  return "<div class='" + $( this ).text() + "'></div>";
});

_

Ini akan menyebabkan setiap


$( ".inner" ).wrap( "<div class='new'></div>" );

_3 memiliki kelas yang sesuai dengan teks yang dibungkusnya

1

2

3

4

5

6

7

8


<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

Contoh

Bungkus div baru di sekitar semua paragraf

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrap( "<div></div>" );
</script>
 
</body>
</html>

Demo

Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34


<!doctype html>
<html lang="en">



<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px blue solid;
    margin: 2px;
    padding: 2px;
  }
  p {
    background: yellow;
    margin: 2px;
    padding: 2px;
  }
  strong {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
 
<script>
$( "span" ).wrap( "<div><div><p><em><b></b></em></p></div></div>" );
</script>
 
</body>
</html>

Demo

Bungkus div baru di sekitar semua paragraf

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$( "p" ).wrap( document.createElement( "div" ) );
</script>
 
</body>
</html>

Demo

Bungkus div kedalaman ganda objek jQuery di sekitar semua paragraf. Perhatikan itu tidak memindahkan objek tetapi hanya mengkloningnya untuk membungkus targetnya

Bagaimana cara membungkus string dalam JavaScript?

Kutipan tunggal vs. .

Dalam JavaScript, Anda dapat memilih tanda kutip tunggal atau ganda untuk membungkus string Anda. .

Ada sedikit perbedaan antara keduanya, dan yang Anda gunakan tergantung pada preferensi pribadi

Bagaimana Anda memecah teks span di CSS?

Anda dapat menggunakan pembungkus kata properti CSS. break-word; , yang akan memecah kata jika terlalu panjang untuk lebar rentang Anda.

Apa itu bungkus teks dalam HTML?

Atribut bungkus menentukan bagaimana teks di area teks akan dibungkus saat dikirim dalam formulir .