在div中嵌套选择菜单打破了jQuery菜单

Question

我正在使用jQuery开发一个多链式下拉系统。

我的演示效果很好：https://jsfiddle.net/m27pnyo3/

但是，当我想在<div>元素中嵌套每个选择菜单时，我遇到了问题。我相信这些问题源于我使用$(this).parent())。

在每个<div>周围看this revised Demo <select>个元素 - 您可以看到它中断：（

有人可以解释我在下面的jQuery中更改的内容以解决此问题吗？

$(function() {    

    $(".series").each(function() {
        $(this).chained($(".mark", $(this).parent()));
    });
    $(".model").each(function() {
        $(this).chained($(".series", $(this).parent()));
    });
    $(".engine").each(function() {
        $(this).chained([
            $(".series", $(this).parent()),
            $(".model", $(this).parent())
        ]);
    });

});

Answer 1

如果你改变你的javascript就行了：

$(function() {    

    $(".series").each(function() {
        $(this).chained($(".mark", $(this).parent().parent()));
    });
    $(".model").each(function() {
        $(this).chained($(".series", $(this).parent().parent()));
    });
    $(".engine").each(function() {
        $(this).chained([
            $(".series", $(this).parent().parent()),
            $(".model", $(this).parent().parent())
        ]);
    });

});

Answer 2

只需添加另一个.parent（）

this.parent().parent()

现在你已经添加了一个div作为父级，这应该将它带到原始目的地。