1

Quero adicionar linha cortando o texto com a tag wrap('<strike>') via JQuery. O problema é que preciso selecionar a tag P e SPAN que estão dentro da DIV class media-body, mas somente quando o checkbox que está dentro da DIV media-left estiver selecionado.

<div class="media">                         
<div class="media-left media-middle">
    <label class="custom-control custom-checkbox m-l-1">
        <input id="task" name="task" type="checkbox" class="custom-control-input" />
        <span class="custom-control-indicator"></span>
    </label>
</div>              
<div class="media-body">                
    <p class="notice-date">Data</p>         
    <span>Uma nota qualquer</span>                      
</div>                          

$('input[id="task"]:checked').each(function()   { 
$(this).closest('.notice-date').wrap('<strike>'); });

Tentei com alguns códigos como o acima e não tive sucesso.

1 Resposta 1

0

Use este seletor:

$(this).closest('div').next('div').find("p, span").wrap('<strike>');

Irá pegar o <p> e <span> da div seguinte do checkbox selecionado e embrulhar na tag <strike>.

$('input.task:checked').each(function(){ 
   $(this).closest('div').next('div').find("p, span").wrap('<strike>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media">                         
   <div class="media-left media-middle">
      <label class="custom-control custom-checkbox m-l-1">
         <input class="task" checked name="task" type="checkbox" class="custom-control-input" />
         <span class="custom-control-indicator"></span>
      </label>
   </div>              
<div class="media-body">                
   <p class="notice-date">Data</p>         
   <span>Uma nota qualquer</span>                      
</div>       

<div class="media">                         
   <div class="media-left media-middle">
      <label class="custom-control custom-checkbox m-l-1">
         <input class="task" name="task" type="checkbox" class="custom-control-input" />
         <span class="custom-control-indicator"></span>
      </label>
   </div>              
<div class="media-body">                
   <p class="notice-date">Data</p>         
   <span>Uma nota qualquer</span>                      
</div>

Importante lembrar que um id deve ser único na página. Portanto troquei os ids por class.

1
  • Valeu, só apliquei a mudança e resolveu..
    – RRV
    Commented 24/02/2018 às 4:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .