Блог

Я разрабатываю выпадающую систему с несколькими цепочками, используя jQuery.

Моя демонстрация здесь отлично работает: https://jsfiddle.net/m27pnyo3 /

Однако, когда я хочу вложить каждое меню выбора в <div> элемент, у меня возникают проблемы. Я считаю, что эти проблемы связаны с моим использованием $(this).parent()) .

Посмотрите эту пересмотренную демонстрацию с <div> элементами вокруг каждого <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())
        ]);
    });

});
  

Если вы измените свой 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())
        ]);
    });

});
  

Просто добавьте еще один .parent()

 this.parent().parent()
  

Теперь вы добавили div в качестве родительского элемента, и это должно привести его к исходному назначению.