0

这让我很头疼，我似乎找不到我需要找到的 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>
4

4 回答 4

1

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

Siblings() 将返回一个包含toggle. 请注意，这accounts是其中一个兄弟姐妹。当您调用 时find('.accounts')，jQuery 正在寻找这些兄弟姐妹的后代，因此它永远不会找到accounts. 相反，只需在通话accounts中用作过滤器：siblings()

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

工作演示

于 2013-08-08T21:11:05.933 回答
1

虽然这可能有效，但您确实应该更改 html 以避免重复的 id，因为这是无效的，并且在使用 id 选择器时会引起麻烦，正如您已经注意到的那样

$(this).parent().siblings("div").find("[id=accounts]").slideToggle(500);
于 2013-08-08T21:12:18.147 回答
0

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

于 2013-08-08T21:12:41.320 回答
0

这里有错误：

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

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

所以你可以这样做：

$(this).parent().siblings("div#accounts").slideToggle(500);

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

$("#accounts").slideToggle(500);

它更有效。

于 2013-08-08T21:17:43.757 回答