Select element with JQuery to add a tag

Question

Select element with JQuery to add a tag

Navigation

#1 by (0 votes)

1

I want to add a line by cutting the text with the wrap('<strike>') tag via JQuery. The problem is that I need to select the P and SPAN tags that are inside the media-body DIV class, but only when the checkbox that is inside the media-left DIV 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 some codes like the one above and I did not succeed.

jquery

asked by anonymous 24.02.2018 / 05:14

1 answer

Google Maps autocomplete does not show address Passing a type created in runtime to a static method

score 0 · Accepted Answer

Use this selector:

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

It will get <p> and <span> from div following checkbox selected and wrap in <strike> tag.

$('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><divclass="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 must be unique on the page. So I changed the ids to class .