Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> unwrap w czystym js
d4ng
post
Post #1





Grupa: Zarejestrowani
Postów: 191
Pomógł: 4
Dołączył: 7.03.2010

Ostrzeżenie: (0%)
-----

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 
  1. <p>
  2.     <span class="bold">
  3.         <span class="ltr">L</span>
  4.         <span class="ltr">o</span>
  5.         <span class="ltr">r</span>
  6.         <span class="ltr">e</span>
  7.         <span class="ltr">m</span>
  8.     </span>
  9.     <span class="ltr"> </span>
  10.     <span class="ltr">i</span>
  11.     <span class="ltr">p</span>
  12.     <span class="ltr">s</span>
  13.     <span class="ltr">u</span>
  14.     <span class="ltr">m</span>
  15. </p>
[HTML] pobierz, plaintext

chce osiągnąć:

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


Potrzebuje rozwiązania w czystym javascripcie..
Pozdrawiam (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
darko
post
Post #2





Grupa: Zarejestrowani
Postów: 2 885
Pomógł: 463
Dołączył: 3.10.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Proszę:

[HTML] pobierz, plaintext 
  1. <html><body>
  2. <p>
  3.     <span class="bold">
  4.         <span class="ltr">L</span>
  5.         <span class="ltr">o</span>
  6.         <span class="ltr">r</span>
  7.         <span class="ltr">e</span>
  8.         <span class="ltr">m</span>
  9.     </span>
  10.     <span class="ltr"> </span>
  11.     <span class="ltr">i</span>
  12.     <span class="ltr">p</span>
  13.     <span class="ltr">s</span>
  14.     <span class="ltr">u</span>
  15.     <span class="ltr">m</span>
  16. </p>
  17. <script>
  18. var items = document.getElementsByClassName('ltr');
  19. var txt1 = ''; var txt2 = '';
  20. //document.createElement('p');
  21. var skip = false;
  22. for(var i = 0; i < items.length; i++) {
  23. 	if(items[i].innerHTML == ' ') {
  24. 		skip = true;
  25. 		continue;
  26. 	}
  27. 	if(skip) {
  28. 		txt2 += items[i].innerHTML;
  29. 	} else {
  30. 		txt1 += items[i].innerHTML;
  31. 	}
  32. }
  33.  
  34. var span = document.createElement('span');
  35. var spanText = document.createTextNode(txt1);
  36. span.appendChild(spanText);
  37. var spanAttr = document.createAttribute('class');
  38. spanAttr.value = 'bold';
  39. span.setAttributeNode(spanAttr);
  40.  
  41. var paragraph = document.createElement('p');
  42. paragraph.appendChild(span);
  43. var paragraphText = document.createTextNode(txt2);
  44. paragraph.appendChild(paragraphText);
  45. document.body.appendChild(paragraph);
  46. //console.log(txt1);
  47. //console.log(txt2);
  48. </script>
  49. </body></html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
d4ng
post
Post #3





Grupa: Zarejestrowani
Postów: 191
Pomógł: 4
Dołączył: 7.03.2010

Ostrzeżenie: (0%)
-----

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 
  1. $("span.ltr").contents().unwrap();
[HTML] pobierz, plaintext


ale jak to zrobić w czystym js?

Ten post edytował d4ng 23.12.2015, 14:03:10
Go to the top of the page
+Quote Post
darko
post
Post #4





Grupa: Zarejestrowani
Postów: 2 885
Pomógł: 463
Dołączył: 3.10.2009
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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/

Ten post edytował darko 23.12.2015, 14:06:06
Go to the top of the page
+Quote Post
d4ng
post
Post #5





Grupa: Zarejestrowani
Postów: 191
Pomógł: 4
Dołączył: 7.03.2010

Ostrzeżenie: (0%)
-----

a skąd ten skrypt ma wiedzieć że mam wywalić klasę "ltr" z elmentu <p>? widziałem ten skrypt (IMG:style_emoticons/default/smile.gif)
Ps. w jquery to już dawno bym sobie poradziła ale to musi być czysty js


[HTML] pobierz, plaintext 
  1.  
  2. var span = el.getElementsByClassName('ltr');
  3.  
  4. while(span.length) {
  5.     var parent = span[ 0 ].parentNode;
  6.     while( span[ 0 ].firstChild ) {
  7.         parent.insertBefore(  span[ 0 ].firstChild, span[ 0 ] );
  8.     }
  9.      parent.removeChild( span[ 0 ] );
  10. }
  11.  
[HTML] pobierz, plaintext


może może?

Ten post edytował d4ng 23.12.2015, 15:01:05
Go to the top of the page
+Quote Post
Comandeer
post
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Polecam lekko podrasowaną wersję tego kodu: https://jsfiddle.net/Comandeer/1op3ae4c/
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 22:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn