Question

<div class="contain_questions">
    <div class="question">
        <div class="question_text">First question</div>
        <div class="question_mandatory">1</div>

        <div class="options">
            <div class="option"><div class="option_name">a</div><div class="option_value">1</div></div>
            <div class="option"><div class="option_name">b</div><div class="option_value">2</div></div>
            <div class="option"><div class="option_name">c</div><div class="option_value">3</div></div>
        </div>

        <a href="" class="add_another_option">add_another_option</a>
    </div>

    .
    . // many more div.question ...
    .

    <input type="button" value="submit_questions" />
</div>

How do you use .each() for each div.option within an outer .each() for each question?
I have the outer .each() working fine, which iterates over all div.question and pushes the question_text etc into an array, however I cant seem to target the options container within each question in order to also push all of the options for each question into the array.

Also, is it possible to target a subset of the DOM with the .each() function, or is there some other way to iterate over all classes within a given class?

Thanks guys..

Answer 1

Just as simple as that:

$(".question").each(function() {
    ...
    $(this).find(".option").each(function() {
        ...
    });
});

So your code might look like the following:

var questions = [];
$(".question").each(function() {
    var obj = {
        name : $(this).find(".question_text").text(),
        options : []
    };

    $(this).find(".option").each(function() {
        obj.options.push({
            name : $(this).find(".option_name").text(),
            value : $(this).find(".option_value").text()
        });
    });

    questions.push(obj);
});

console.log(questions);