CODEWITHSUNDEEP
jqueryjquery-selectors
Dr. Atul Tiwari
Dr. Atul Tiwari

Reputation: 1085

Find next element by class in jQuery

Firstly I have gone through some questions having same title as mine like this etc. but none solved my problem.

HTML part -

<tr id="row_question_container">
    <td valign="top" colspan="2">
        <div id="at_test_area-1" class="at_test_area">
            <div id="at_questions_container">
                <div id="1" class="question_block completed unmarked" style="display: none;">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="2" class="question_block completed marked">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="3" class="question_block incomplete unmarked" style="display: none">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="4" class="question_block incomplete unmarked" style="display: none">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
            </div>
        </div>
    </td>
</tr>

What I am trying to achieve is to get next/closet id of div (to navigate using next and previous buttons) having class incomplete or marked. After reading through similar questions, I tried following jQuery, but it returned undefined

var marked_question = $('#at_questions_container').next('.marked').attr('id');
alert(marked_question);

Upvotes: 1

Views: 4199

Answers (4)

AmmarCSE
AmmarCSE

Reputation: 30557

For descendants you should use find() or children() depending on how deep you wish to go

var marked_question = $('#at_questions_container').find('.marked').attr('id');
console.log(marked_question);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr id="row_question_container">
    <td valign="top" colspan="2">
        <div id="at_test_area-1" class="at_test_area">
            <div id="at_questions_container">
                <div id="1" class="question_block completed unmarked" style="display: none;">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="2" class="question_block completed marked">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="3" class="question_block incomplete unmarked" style="display: none">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
                <div id="4" class="question_block incomplete unmarked" style="display: none">
                <!-- Question / Option / Settings etc in nested tables are here -->
                </div>
            </div>
        </div>
    </td>
</tr>
</table>

Upvotes: 0

BenM
BenM

Reputation: 53198

jQuery's next() function will look for siblings of #at_questions_container, rather than child elements.

Since you're looking for a child of #at_questions_container, you should use the children() function instead, in combination with the :first selector:

var theID = $('#at_questions_container').children('.marked:first').attr('id');

Using children() is a much safer approach, since it will only search one depth, thus preventing any sub-elements which also have a class of .marked from being returned. For example, from the jQuery docs:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

As a slight post-script to the above, the use of the :first selector is not essential. When calling attr('id'), jQuery will automatically return the ID attribute of the first element in the collection.

Upvotes: 1

Radu Gheorghies
Radu Gheorghies

Reputation: 176

try:

var marked_question =$('#at_questions_container').find('.marked').first().attr('id');
alert(marked_question);

Upvotes: 0

AtheistP3ace
AtheistP3ace

Reputation: 9691

Try this:

var marked_question = $('#at_questions_container').find('.marked:first').attr('id');

You want to find descendants of at_questions_container and the first selector will give you the first one found. next works on sibling elements.

Upvotes: 0

Related Questions