Question

How would i go about using jQuery to add a “selected” class to the LI’s in this?
Once all 6 questions have been selected, i would then need to go through the questions and get the selected answer. I have added the Question ID along with the answer ID to each answer which might make it easier to pick up and process later.

 <div id="1002" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li id="1002-a1">Answer 1</li>
        <li id="1002-a2">Answer 2</li>
        <li id="1002-a3">Answer 3</li>
    </ul>
   </div>
 </div>

This is how i would like it to look…

 <div id="1002" class="question2" style="display: block; ">
   <h1>Question 2</h1>
   <p><i>This is Question 2</i></p>
   <div class="answer-grid">
    <ul class="answer">
        <li id="1002-a1" class="selected">Answer 1</li>
        <li id="1002-a2">Answer 2</li>
        <li id="1002-a3">Answer 3</li>
    </ul>
   </div>
 </div>

Many thanks in advance.

Answer 1

To toggle the <li> elements:

$('.answer li').on('click', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

To find the selected <li> elements:

var answers = $('.answer li.selected').map(function() {
    return this.id;
}).get();