Select element with Jquery to add a tag

Question

I want to add line cutting text with tag wrap('<strike>') via Jquery. The problem is that I need to select the P and SPAN tag that are inside the DIV class media-body, but only when the checkbox that is inside the DIV media-left is selected.

<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>'); });

I tried with some codes like the above and did not succeed.

Answer 1

Use this dial:

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

Will catch the <p> and <span> of div following of checkbox selected and wrapped in the 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>

Important to remember that an id should be unique on the page. So I switched the ids for class.