Question

Facing some problems with jQuery selectors.

My HTML is like:

<form method="" action="">  
    <p id="question_1">  
        <h1 id="question">1. A Question</h1>  
        <div id="choices">  
            <p id="option1"><input type="radio" id="option" name="q_1" value="1" />A</p>  
            <p id="option2"><input type="radio" id="option" name="q_2" value="2" />B</p>  
            <p id="option3"><input type="radio" id="option" name="q_3" value="3" />C</p>              
        </div>  
    </p>      
.  
.  
.  
</form>

There are n such questions.

I want to highlight the <p> containing the 3rd radio button for each question. For example,

    p#question_1 > p#option3  
    p#question_2 > p#option3  
    p#question_3 > p#option3  

How to do that?

I was trying something like this, without any success:

$("form p#question_" + i).filter("p:eq(3)").addClass("correct");

Answer 1

I want to highlight the <p> containing
the 3rd radio button for each
question.

Use start with ^ selector with nth-child like this:

$('p[id^="question"]:nth-child(3)').addClass('correct');

What ^="question" does is that it selects all paragraphs starting with question text in their ids and then nth-child(3) is used to select the third paragraph.

More Info:

• Starts With Selector
• :nth-child Selector