¿Cómo envolver todo el código HTML después de hasta la próxima aparición de ?

Question

<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

Debería estar después de jQuery:

<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass">Maybe also only some text.</div>
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>
    <div class="someClass"><a href="path/to/link" title="some title" class="download">Only with link</a></div>
</p>

Por lo tanto, todo el código HTML después del  debe estar envuelto en un div hasta la próxima aparición de 

Lo que intenté:

$(".datum").each(function (index) {
        $(this).nextUntil("p").andSelf().wrapAll("<div class='someClass' />");
    });

O:

$(".datum").nextUntil("p").wrap('<div class="someClass" />');

Tampoco funcionó.

javascript jquery html wrapall nextuntil

3

user3532637 10 dic. 2015 a las 14:56

Answer 1

Intente esto: puede utilizar wrapInner para ajustar el contenido div. bodytext div y luego saca datum palmo del div envuelto.

$(function(){
    $('p.bodytext').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

EDITAR : - Como OP quiere poner el filtro en bodytext que contiene el espacio secundario datum. Aquí puede usar : tiene selector para bodytext. También puede usar : contiene o . has () métodos jQuery.

$(function(){
    $('p.bodytext:has(span.datum)').each(function(){
    
      $(this).wrapInner( "<div class='someClass'></div>");
      $(this).prepend($(this).find('div.someClass').find('span.datum'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p class="bodytext">
    <span>19.11.2015:</span>Some text <a href="path/to/link" title="some title" class="download">Some text</a>. Again some text!
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span>Maybe also only some text.
</p>
<p class="bodytext">
    <span class="datum">19.11.2015:</span><a href="path/to/link" title="some title" class="download">Only with link</a>
</p>

3

Bhushan Kawadkar 11 dic. 2015 a las 04:15

Answer 2

Su lógica es incorrecta porque el código agrega elemento div después del elemento que tiene la clase "datum" hasta que se inicia el elemento . Pero en div con class = "bodytext" no tienes ningún elemento .

Prueba esto;

$(".bodytext").each(){
    $(this).after($(".datum")).wrapAll("<div class='someClass'>Some text <a href='path/to/link' title='some title' class='download'>Some text</a>. Again some text!</div>");
}

No estoy seguro acerca de wrapAll, pero el orden es verdadero para la operación de agregar.

0

Mr Lister 14 dic. 2015 a las 18:25

Answer 3

Tratar:

$('.bodytext').find('*').not('span').wrap('<div class="someClass" />')

0

madalinivascu 10 dic. 2015 a las 12:10

¿Cómo envolver todo el código HTML después de <span class = "xy"> hasta la próxima aparición de </p>?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript