根据换行符使用jQuery选择段落中的行

Question

This question may be related.

I have a Django recipe app that uses a form containing of a CharField TextArea. This field is used to enter a list of directions (string). I have chosen to separate each direction with a line break (ENTER in form), and use the following in my template (html) to keep line breaks as in original form

<div id="items">
    <p> 
        {{ recipe.directions_field|safe }}
    </p>
</div>

This will basically appear as something like

<div id="items">
    <p>
        Line one <br/>
        Two <br/> 
        Three <br/>
    </p>
</div>

What I want to do is to use jQuery to "check" (strikethrough) one single line (may contain of several words) in my template. I have tried the following, but as expected, this checks the entire paragraph.

<script>
  $(document).ready(function() {
    $("#items p").click(function () {
    $(this).toggleClass('stroked');
    });
  });
</script> 

Where my css has

.stroked{ text-decoration: line-through; }

In my Django view I replaced "\\n" with html line break in order to make sure line breaks are not removed when shown in template.

directions = directions.replace("\n", "<br/>")

I think a solution like this would work if I could just find an easy way to use <br/> as a splitter instead of ". " or any other symbol. I couldn't make that work with <br/> in the example.

Any suggestions, either using a solution like this or another way? I guess there are many ways to solve this, but hope to find an easy implementation.

Thanks for any reply.

Answer 1

It's much easier if you wrap every single line into <span></span> , like this:

<div id="items">
<p>
    <span>line one <br/></span>
    <span>line two <br/></span>
    <span>line three <br/></span>
</p>
</div>

So what you need to do in javascript is:

$(function(){
    $('#items > p > span').click(function(){
        if($(this).attr('class') == 'stroked'){
            $(this).removeAttr('class');
        }
        else{
            $(this).addClass('stroked');
        }
    });
});