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

Question

首先我已经解决了一些与我的标题相同的问题，例如this 等，但没有一个解决我的问题。

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>

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

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

Answer 1

对于后代，您应该使用find() 或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 的后代，第一个选择器会给你找到的第一个。 next 作用于兄弟元素。

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() 函数，并结合:first 选择器：

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

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

.children() 方法与 .find() 的不同之处仅在于 .children() 在 DOM 树中向下移动一层，而 .find() 可以遍历 向下多个级别选择后代元素（孙子， 等等）。

---

作为对上述内容的补充说明，:first 选择器的使用不是必需的。调用attr('id')时，jQuery会自动返回集合中第一个元素的ID属性。