Forum PHP.pl > unwrap w czystym js

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

d4ng

23.12.2015, 13:17:57

Witajcie chciałbym zapytać w jaki sposób moge usunąć z danego elementu wszystkie wrapy otaczające element potomny po klasie? Przykład:

[HTML] pobierz, plaintext 
<p>
    <span class="bold">
        <span class="ltr">L</span>
        <span class="ltr">o</span>
        <span class="ltr">r</span>
        <span class="ltr">e</span>
        <span class="ltr">m</span>
    </span>
    <span class="ltr"> </span>
    <span class="ltr">i</span>
    <span class="ltr">p</span>
    <span class="ltr">s</span>
    <span class="ltr">u</span>
    <span class="ltr">m</span>
</p>
[HTML] pobierz, plaintext

chce osiągnąć:

[HTML] pobierz, plaintext 
<p><span class="bold">Lorem</span> Ipsum</p>
[HTML] pobierz, plaintext

Potrzebuje rozwiązania w czystym javascripcie..
Pozdrawiam

darko

23.12.2015, 13:54:24

Proszę:

[HTML] pobierz, plaintext 
<html><body>
<p>
    <span class="bold">
        <span class="ltr">L</span>
        <span class="ltr">o</span>
        <span class="ltr">r</span>
        <span class="ltr">e</span>
        <span class="ltr">m</span>
    </span>
    <span class="ltr"> </span>
    <span class="ltr">i</span>
    <span class="ltr">p</span>
    <span class="ltr">s</span>
    <span class="ltr">u</span>
    <span class="ltr">m</span>
</p>
<script>
var items = document.getElementsByClassName('ltr');
var txt1 = ''; var txt2 = '';
//document.createElement('p');
var skip = false;
for(var i = 0; i < items.length; i++) {
	if(items[i].innerHTML == ' ') {
		skip = true;
		continue;
	}
	if(skip) {
		txt2 += items[i].innerHTML;
	} else {
		txt1 += items[i].innerHTML;
	}
}
 
var span = document.createElement('span');
var spanText = document.createTextNode(txt1);
span.appendChild(spanText);
var spanAttr = document.createAttribute('class');
spanAttr.value = 'bold';
span.setAttributeNode(spanAttr);
 
var paragraph = document.createElement('p');
paragraph.appendChild(span);
var paragraphText = document.createTextNode(txt2);
paragraph.appendChild(paragraphText);
document.body.appendChild(paragraph);
//console.log(txt1);
//console.log(txt2);
</script>
</body></html>
[HTML] pobierz, plaintext

d4ng

23.12.2015, 14:02:38

Bardzo dziękuje, ale skrypt musi być dużo bardziej elastyczny tzn w elemencie <p> może być z 100 różnych innych elementów o róznych id czy klasach. A mi zależy żeby z tego worka <p> odwrapować elementy posiadające klasę "ltr".

w jquery prawdopodobnie wyglądałoby to tak:

[HTML] pobierz, plaintext 
$("span.ltr").contents().unwrap();
[HTML] pobierz, plaintext

ale jak to zrobić w czystym js?

darko

23.12.2015, 14:04:17

Zapewne analogicznie jak tutaj: https://plainjs.com/javascript/manipulation...dom-element-35/

// jeśli nie musisz fizycznie obrabiać zbioru elementów odpakowują pewne nadrzędne korzenie, to wystarczy Ci do tego metoda find: https://api.jquery.com/find/

d4ng

23.12.2015, 14:15:26

a skąd ten skrypt ma wiedzieć że mam wywalić klasę "ltr" z elmentu <p>? widziałem ten skrypt

Ps. w jquery to już dawno bym sobie poradziła ale to musi być czysty js

[HTML] pobierz, plaintext 
 
var span = el.getElementsByClassName('ltr');
 
while(span.length) {
    var parent = span[ 0 ].parentNode;
    while( span[ 0 ].firstChild ) {
        parent.insertBefore(  span[ 0 ].firstChild, span[ 0 ] );
    }
     parent.removeChild( span[ 0 ] );
}
 
[HTML] pobierz, plaintext

może może?

Comandeer

23.12.2015, 19:41:59

Polecam lekko podrasowaną wersję tego kodu: https://jsfiddle.net/Comandeer/1op3ae4c/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.