在 jQuery 中按 class 查找下一个元素

Question

首先，我已经完成了一些与我的标题相同的问题，例如 this 等，但是 none 解决了我的问题。

HTML部分-

<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>

我想要实现的是获得 next/closet id 的 div（使用下一个和上一个按钮导航）具有 class incomplete或 marked。在阅读了类似的问题后，我尝试关注 jQuery，但它返回了 undefined

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

Answer 1

对于后代，您应该使用 find() or children()，具体取决于您希望达到的深度

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>

Answer 2

试试这个：

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

你想找到 at_questions_container 的后代，第一个选择器会给你找到的第一个。接下来处理兄弟元素。

Answer 3

尝试：

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

Answer 4

jQuery 的 next() 函数将查找 #at_questions_container 的 siblings，而不是子元素。

由于您正在寻找 #at_questions_container 的子项，因此您应该使用 children() function instead, in combination with the :first 选择器：

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

使用 children() 是一种更安全的方法，因为它只会搜索一个深度，从而防止任何 class 为 .marked 的子元素被 return编辑。例如，来自 jQuery 文档：

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.

作为上面的 post-script，:first 选择器的使用不是必需的。调用attr('id')时，jQuery会自动return集合中第一个元素的ID属性。

在 jQuery 中按 class 查找下一个元素

Find next element by class in jQuery

jquery

element

class

next