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

4smxwvx5  于 2023-06-05  发布在  jQuery
关注(0)|答案(4)|浏览(441)

首先,我已经通过了一些问题与我的标题相同,如this等。但都没能解决我的问题

HTMLpart -

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

我试图实现的是获得div的next/closet id(使用下一个和上一个按钮导航)具有incompletemarked类。在阅读了类似的问题之后,我尝试使用jQuery,但它返回了undefined

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

j1dl9f461#

jQuery的next()函数将查找#at_questions_container兄弟元素,而不是子元素。
由于您正在查找#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属性。

r1wp621o

r1wp621o2#

对于后代,您应该使用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>
ljsrvy3e

ljsrvy3e3#

试试这个:

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

你想找到at_questions_container的后代,第一个选择器会给予你找到的第一个。next作用于同级元素。

sqougxex

sqougxex4#

尝试:

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

相关问题