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>

我想要实现的目标是获得id的{{1}}的{{1}}（使用下一个和上一个按钮导航）div或incomplete。在阅读了类似的问题后，我尝试了 jQuery ，但它返回了marked

undefined

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的后代，第一个选择器会给你找到的第一个。接下来是关于兄弟元素的。

Answer 3

尝试：

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

Answer 4

jQuery的next()函数会查找#at_questions_container的兄弟，而不是子元素。

由于您正在寻找#at_questions_container的孩子，因此您应该使用children()功能，与:first选择器结合使用：

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

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

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

作为上述的一个轻微的后脚本，使用:first选择器并不重要。调用attr('id')时，jQuery将自动返回集合中第一个元素的ID属性。

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

4 个答案: