Pertanyaan Gunakan jquery untuk mengonversi div menjadi rentang


Saya mencoba mengubah output HTML dari widget yang tidak dapat saya kendalikan. Pada dasarnya masalahnya adalah widget output HTML yang menggunakan divs di dalam p yang tidak valid ..

<div class="widget_output">
    <ul>
        <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
       </li>
       <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
        </li>
</div>

Ide saya adalah mengubah divs menjadi bentang yang merupakan elemen inline, HTML kemudian harus valid. Saya telah melihat jquery untuk mencoba dan memilih kelas dan kemudian mengonversi div ini menjadi rentang. Adakah yang bisa mengarahkan saya ke arah yang benar atau tutorial tentang seseorang yang mencapai sesuatu yang serupa?


6
2017-07-29 07:07


asal


Jawaban:


Anda tidak perlu jQuery untuk itu, Anda cukup menggunakan ekspresi reguler untuk menggantikan <div> tag dengan <span> tag. Coba ini:

var widgetHTML = $('div.widget_output').html();
    widgetHTML = widgetHTML
       .replace(/<div>/g, '<span>')
       .replace(/<\/div>/g, '</span>');
$('div.widget_output').html(widgetHTML);

Demo: http://jsfiddle.net/codef0rmer/daYL4/3/


3
2017-07-29 07:59



Hanya menempel JSFiddle bersama:

http://jsfiddle.net/daYL4/3/

$(".widget_output div").replaceWith(function() { 
    return "<span>" + this.innerHTML + "</span>"; 
});

Tampaknya berfungsi lebih baik daripada saran asli saya. Tapi lihatlah jawaban atas pertanyaan terkait ini, karena mereka mencakup beberapa poin bagus:

Gunakan jQuery untuk mengubah tag HTML?


11
2017-07-29 07:10



Jika Anda melakukannya dalam CSS, Anda tidak akan mengalami waktu eksekusi javascript.

CSS

.widget_output > ul > li > div { display:inline; }

-1
2017-07-29 07:26