Question

这是我的头脑，我似乎无法找到我需要找到的dom元素我已经尝试了下一个/最近/找到并且看起来似乎不是div。代码非常自我解释。

行$（this）.parent（）。siblings（“div”）。find（“＃accounts”）。slideToggle（500）;不会让我得到称为帐户的div。

<div data-bind="foreach: Households " class="householdRow">
    <div class="actions item"><img id="toggle" src="~/Images/toggle.png"/></div>
    <div class="item" data-bind="text: HouseholdId"></div>
    <div class="item" data-bind="text: Name"></div>
    <div class="item">IACodes</div>
    <div class="item">Date</div>
    <div class="numberItem item">T12</div>
    <div class="numberItem item">AUA</div>
    <div class="item" data-bind="text: Segmentation.Name"></div>
    <div class="actions item"></div>
    <div id="accounts" data-bind="foreach: Accounts">
        <div class="accountRow">
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="dateFormat: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="item"></div>
            <div class="actions item"><img id="delete" src="~/Images/delete.png"/></div>
        </div>
    </div>
</div>



<script type="text/javascript">
$(function() {

    ...

    $(document).on("click", "#toggle", function () {
        //$(this).next("#accounts").slideToggle(500);
        $(this).parent().siblings("div").find("#accounts").slideToggle(500);
    });

});

</script>

Answer 1

ID必须是唯一的，否则在查询DOM时会出现损坏/未定义的行为。将toggle和accounts改为课程。

兄弟姐妹（）将返回toggle父母的所有兄弟姐妹的列表。请注意，accounts是其中一个兄弟姐妹。当您致电find('.accounts')时，jQuery正在寻找这些兄弟姐妹的后代，因此它永远不会找到accounts。相反，只需使用accounts作为siblings()电话中的过滤器：

$(document).on("click", ".toggle", function () {
    $(this).parent().siblings(".accounts").slideToggle(500);
});

<强> Working Demo

Answer 2

虽然这可行，但真的应该更改你的html以避免重复的ID，因为它无效并且在你已经注意到使用id选择器时会引起麻烦

$(this).parent().siblings("div").find("[id=accounts]").slideToggle(500);

Answer 3

试试这个：$('#accounts', $(this).parent().siblings("div"))

Answer 4

这里有错误：

$(this).parent().siblings("div").find("#accounts")
___________from_↑_____________________________to_↑

在这里，你试图找到$(this).parent().siblings("div")下的“帐户”DOM，实际上找不到它。

所以你可以这样做：

$（本）.parent（）的兄弟姐妹（ “DIV＃帐户”）的slideToggle（500）;。。

或者如果您知道ID，则可以直接编码为：

$（ “＃帐户”）的slideToggle（500）;

更有效。

JQuery通过id找到下一个DOM元素，其中Id不是UNIQUE

4 个答案: