CODEWITHSUNDEEP
javascriptjqueryhtml
Vikram Singh Chandel
Vikram Singh Chandel

Reputation: 1308

How to get all the elements with the same class name from any jquery object?

Please find below the html code:

<table class="table table-bordered queTable" id="qustionTbl">
        <thead>
        <tr>
            <th width="60px">Sr No</th>
            <th>Enter Question</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <b>Q.1</b>
            </td>
            <td>
                <div class="QuestionDiv">
                    <div class="row ">
                        <div class="col-sm-10 col-xs-10 col-md-10">
                            <input class="form-control questionTxt" placeholder="Question" type="text">
                        </div>
                    </div>

                    <div class="subQuestionDiv">
                        <div class="row">
                            <div class="col-sm-10 col-xs-10 col-md-10">
                                <input class="form-control subQuestionTxt" placeholder="Question" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="subQuestionDiv">
                        <div class="row">
                            <div class="col-sm-10 col-xs-10 col-md-10">
                                <input class="form-control subQuestionTxt" placeholder="Question" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="subQuestionDiv">
                        <div class="row">
                            <div class="col-sm-10 col-xs-10 col-md-10">
                                <input class="form-control subQuestionTxt" placeholder="Question" type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

In above HTML table, I want to itterate all rows to get .QuestionDiv from each row and all .subQuestionDiv from each .QuestionDiv by Jquery. I have written following jquery code to get this. I am getting .QuestionDiv from row, but I am not getting how to get all .subQuestionDiv from .QuestionDiv object. please help in this.

JQuery Code:

    $('#qustionTbl').find('tr').each(function (i, el) {
            question={}
            subQuestionList=[]

            var $tds = $(this).find('td')
            questionDivObj = $tds.eq(1).find('.QuestionDiv')
            questionTxt=$(questionDivObj).find('.questionTxt').val()
            question['question']=questionTxt;

             // HERE IS THE PROBLEM, HOW TO GET ALL .subQuestionDiv DIV
             // FROM questionDivObj
            $(".subQuestionDiv").each( function() {
                subQuestionTxt=$(this).find('.subQuestionTxt').val()
                subQuestionList.push({'subQuestion':subQuestionTxt});
            });
            question['subQuestions']=subQuestionList
            questionsList.push(question)

     });
});

Upvotes: 1

Views: 3450

Answers (3)

random_user_name
random_user_name

Reputation: 26160

You just need to add the "context" to the jQuery selector:

$(".subQuestionDiv", questionDivObj).each(...)

In the context of your code:

$('#qustionTbl').find('tr').each(function (i, el) {
        question={}
        subQuestionList=[]

        var $tds = $(this).find('td')
        questionDivObj = $tds.eq(1).find('.QuestionDiv')
        questionTxt=$(questionDivObj).find('.questionTxt').val()
        question['question']=questionTxt;

        // add context to this selector, finds within this question div            $(".subQuestionDiv", questionDivObj).each( function() {
            subQuestionTxt=$(this).find('.subQuestionTxt').val()
            subQuestionList.push({'subQuestion':subQuestionTxt});
        });
        question['subQuestions']=subQuestionList
        questionsList.push(question)

 });

Upvotes: 1

user8455694
user8455694

Reputation: 270

Try this :

$(questionDivObj).find(".subQuestionDiv").each( function(i,elm) {
                subQuestionTxt=$(this).eq(i).find('.subQuestionTxt').val()
                subQuestionList.eq(i).push({'subQuestion':subQuestionTxt});
            });

Upvotes: 0

Stephen S
Stephen S

Reputation: 374

After your comment, I believe $(questionDivObj).children(".subQuestionDiv") will work. It returns a list of all elements that are children of questionDivObj that match ".subQuestionDiv".

Upvotes: 0

Related Questions