Hướng dẫn replace tag html jquery - thay thế thẻ html jquery

114

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Goal:

Sử dụng jQuery, tôi đang cố gắng thay thế tất cả các lần xuất hiện của:

 ... 

with:

 ... 

Giải pháp của tôi:

Tôi đã đi xa như sau,

$('code').replaceWith( "
" + $('code').html() + "
" );

Vấn đề với giải pháp của tôi:

Nhưng các vấn đề là nó thay thế mọi thứ giữa các thẻ "mã thứ hai, thứ ba, thứ tư, v.v.) bằng nội dung giữa các thẻ" mã "đầu tiên.first "code" tags.

ví dụ.

 A 
 B 
 C 

trở thành

 A 
 A 
 A 

Tôi nghĩ rằng tôi cần sử dụng "cái này" và một số loại chức năng nhưng tôi sợ tôi vẫn đang học và không thực sự hiểu làm thế nào để ghép một giải pháp lại với nhau.

Hỏi ngày 17 tháng 8 năm 2011 lúc 13:10Aug 17, 2011 at 13:10

1

Bạn có thể chuyển một hàm cho

$('code').replaceWith( "
" + $('code').html() + "
" );

$('code').replaceWith(function(){
    return $("
", {html: $(this).html()});
});
Bên trong hàm, 
$('code').replaceWith( "
" + $('code').html() + "
" );
3 đề cập đến phần tử 
$('code').replaceWith( "
" + $('code').html() + "
" );
4 hiện được xử lý.
THỬ NGHIỆM
Cập nhật: Không có sự khác biệt hiệu suất lớn, nhưng trong trường hợp các yếu tố ____24 có những đứa trẻ HTML khác, thêm trẻ em thay vì tuần tự hóa chúng cảm thấy chính xác hơn: There is no big performance difference, but in case the 
$('code').replaceWith( "
" + $('code').html() + "
" );
4 elements have other HTML children, appending the children instead of serializing them feels to be more correct:
$('code').replaceWith(function(){
    return $("
").append($(this).contents());
});
 Đã trả lời ngày 17 tháng 8 năm 2011 lúc 13:13Aug 17, 2011 at 13:13
 
Felix Klingfelix KlingFelix Kling
771K172 Huy hiệu vàng1069 Huy hiệu bạc1115 Huy hiệu Đồng172 gold badges1069 silver badges1115 bronze badges
7
Cái này đẹp hơn nhiều:
$('code').contents().unwrap().wrap('
');
Mặc dù phải thừa nhận giải pháp của Felix Kling là nhanh gấp đôi:
 
 Đã trả lời ngày 17 tháng 8 năm 2011 lúc 13:19Aug 17, 2011 at 13:19
 

Jens Rolandjens RolandJens Roland
Phim thương hiệu vàng 27.2K1414 gold badges83 silver badges104 bronze badges
9
Chính xác là bạn sẽ luôn có được nội dung đầu tiên của ____ 24, bởi vì 
$('code').replaceWith( "
" + $('code').html() + "
" );
7 sẽ luôn đề cập đến yếu tố đầu tiên, bất cứ nơi nào bạn sử dụng.
Thay vào đó, bạn có thể sử dụng 
$('code').replaceWith( "
" + $('code').html() + "
" );
8 để lặp lại tất cả các yếu tố và thay đổi từng phần tử:
$('code').each(function() {
    $(this).replaceWith( "
" + $(this).html() + "
" );
    // this function is executed for all 'code' elements, and
    // 'this' refers to one element from the set of all 'code'
    // elements each time it is called.
});
 Đã trả lời ngày 17 tháng 8 năm 2011 lúc 13:14Aug 17, 2011 at 13:14
 
PIMVDBPIMVDBpimvdb
Phù bằng vàng 149K7676 gold badges301 silver badges351 bronze badges
0
Thử cái này:
$('code').each(function(){

    $(this).replaceWith( "
" + $(this).html() + "
" );

});
http://jsfiddle.net/mTGhV/
 Đã trả lời ngày 17 tháng 8 năm 2011 lúc 13:14Aug 17, 2011 at 13:14
 
PIMVDBPIMVDBKokos
Phù bằng vàng 149K764 gold badges25 silver badges44 bronze badges
1
Thử cái này:
 ... 
0
 
Kokoskokos
8.8614 Huy hiệu vàng25 Huy hiệu bạc44 Huy hiệu đồng14 gold badges71 silver badges63 bronze badges
Còn cái này thì sao?Aug 17, 2011 at 13:16




XaviTae-Sung Shin
Huy hiệu vàng 19,9K1433 gold badges136 silver badges237 bronze badges
 Đã trả lời ngày 17 tháng 8 năm 2011 lúc 13:16
Tae-Sung Shintae-Sung Shin
19.9K33 Huy hiệu vàng136 Huy hiệu bạc237 Huy hiệu Đồng
Xây dựng câu trả lời của Felix.
 ... 
2
 ... 
1Dec 10, 2013 at 11:42
 

Điều này sẽ tái tạo các thuộc tính của các thẻ 
$('code').replaceWith( "
" + $('code').html() + "
" );
4 trong các thẻ thay thế 
 A 
 B 
 C 
0.tewathia
Chỉnh sửa: Điều này sẽ thay thế ngay cả các thẻ 
$('code').replaceWith( "
" + $('code').html() + "
" );
4 nằm trong 
 A 
 B 
 C 
2 của các thẻ 
$('code').replaceWith( "
" + $('code').html() + "
" );
4 khác.3 gold badges21 silver badges27 bronze badges
1
 Đã trả lời ngày 10 tháng 12 năm 2013 lúc 11:42
Tewathiatewathia
6.5603 Huy hiệu vàng21 Huy hiệu bạc27 Huy hiệu đồng
Nếu bạn đang sử dụng vani javascript, bạn sẽ:
Tạo phần tử mới
Di chuyển những đứa trẻ của yếu tố cũ vào yếu tố mới
Chèn phần tử mới trước phần cũ
Xóa phần tử cũ
 http://jsperf.com/substituting-one-tag-for-another-with-jquery/7
Đây là tương đương với quá trình này:destructive.
 ... 
3Apr 16, 2014 at 21:21
 
Đây là URL JSperf: http://jsperf.com/substituting-one-gag-for-another-with-jquery/7Salman A
PS: Tất cả các giải pháp sử dụng 
 A 
 B 
 C 
4 hoặc 
 A 
 B 
 C 
5 đều phá hủy.80 gold badges423 silver badges513 bronze badges
 Đã trả lời ngày 16 tháng 4 năm 2014 lúc 21:21
 ... 
4
Salman Asalman aJul 9, 2018 at 9:22

253K80 Huy hiệu vàng423 Huy hiệu bạc513 Huy hiệu Đồng
 ... 
5
Một cách ngắn và dễ dàng khác:



 ... 
6
 Đã trả lời ngày 9 tháng 7 năm 2018 lúc 9:22
 ... 
7
Tất cả các câu trả lời được đưa ra ở đây giả định (như ví dụ câu hỏi chỉ ra) rằng không có thuộc tính nào trong thẻ. Nếu câu trả lời được chấp nhận được thực hiện trên này:Jul 16, 2016 at 11:16
 
Nếu sẽ được thay thế bằngpatrick
Điều gì sẽ xảy ra nếu bạn muốn giữ các thuộc tính là tốt - đó là ý nghĩa của việc thay thế một thẻ có nghĩa là ...? Đây là giải pháp:7 gold badges66 silver badges79 bronze
badges
2
 ... 
8
 Đã trả lời ngày 16 tháng 7 năm 2016 lúc 11:16
PatrickpatrickAug 13, 2013 at 9:10
 
11.2K7 Huy hiệu vàng66 Huy hiệu bạc79 Huy hiệu đồng
 ... 
9
Cách tốt nhất và sạch sẽ.
 Đã trả lời ngày 13 tháng 8 năm 2013 lúc 9:10Apr 2, 2015 at 16:52

Bạn có thể sử dụng chức năng HTML của JQuery. Dưới đây là một mẫu Thay thế thẻ mã bằng thẻ trước trong khi giữ lại tất cả các thuộc tính của mã.ControlAltDelete
Điều này có thể hoạt động với bất kỳ bộ thẻ phần tử HTML nào cần được hoán đổi trong khi giữ lại tất cả các thuộc tính của thẻ trước đó.5 gold badges31 silver badges49 bronze badges
 Đã trả lời ngày 2 tháng 4 năm 2015 lúc 16:52
ControlaltDeletEcontrolaltDelete
Usage:
$('code').replaceWith( "
" + $('code').html() + "
" );
1
3.5665 huy hiệu vàng31 Huy hiệu bạc49 Huy hiệu đồngJan 27, 2016 at 18:45
 
Đã thực hiện plugin 
 A 
 B 
 C 
6, cũng duy trì các thuộc tính.Jagdish Idhate
$('code').replaceWith( "
" + $('code').html() + "
" );
08 gold badges31 silver badges49 bronze badges