Cascading values ​​in the ul> li hierarchy with javascript / jquery closure

I have ul> li> ul> li hierarchy. Does everyone have an associated text input field? I want to bind onchange event handlers to each input element so that when this element changes, all subsequent child input elements also inherit this value. I want to implement a closure around the innermost .bind function for each element so that I can pass the parent input value at runtime. What is the best way to do this?

var $generatedFeatureTree = $('.generated','#feature_weights');

// Get all input text boxes in the top level div
var generatedWeights = $generatedFeatureTree.find('input[type="text"]');

for(var i =0; i< generatedWeights.length; ++i){

    var $this = $(generatedWeights[i]);
    var value = $this.val();

    $this.bind('change',function(value){
        $$this = $(this);

        // get all children input elements of this node by traversing a parent 'li'
        // and getting the lone 'ul' child
        var children = $$this.parent('li').children('ul').find('input[type="text"]');

        for(var j=0;j<children.length;++j){
            $$$this = $(children[j]);
            $$$this.val(value);
        }
    });

    }
+3
source share
1 answer

, , , , . ?

var myInputs = $('input[type=text]');  //use whatever selector you need to grab ALL textboxes
myInputs.change(function() {
    $(this).siblings('ul').find('input[type=text]').val($(this).val());
});

, , , , - . , . <ul>, , <ul> , . , , .

: http://jsfiddle.net/Ender/wXqcE/

+3

Source: https://habr.com/ru/post/1778441/


All Articles