dynamic inheritance of value of an input for the children (unordered list)

Question

dynamic inheritance of value of an input for the children (unordered list)

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I need some idea how to create a dynamic inheritance of values from a parent input to the children and grandchildren input. Once the user types the value into an input it automatically needs to be changed in the child items. based on an input attribute called "inherit" that receives the input id from which it will inherit the value.

The schema that I created is not right, it updates all.

 
$('input:text').change(function(){
   var id = $(this).attr('id');
   if (($(this).parent().find('input:text').attr('herdar')) == id) {
       $(this).parent().find('input:text').val(id);
   }
});

<div id="teste1">
    <ul>
        <li><input type="checkbox" value="00" checked="true"><input type="text" >teste
        
             <ul>
                 <li> <input type="checkbox" value="01"><input type="text" >item pai
                    <ul>
                        <li><input type="checkbox" value="01"><input type="text" >item filho</li>
                        <li><input type="checkbox" value="01"><input type="text" >item filho</li>  
                   </ul>
                </li>
               <li><input type="checkbox" value="04"><input type="text" >item irmão</li>
           </ul>
        </li>
    </ul>
</div>

Could anyone help me?

I've done it with Jquery, but if someone has a simpler and better idea, that's fine.

jquery html5

asked by anonymous 17.12.2015 / 18:57

2 answers

Decode String upload videos directly to Vimeo with URL return

score 1 · Answer 1

See if this is what you wanted:

Type something in the first input .

$('input:text').keyup(function(){
	var id= $(this).attr('id');
  $('input[data-herdar="' + id + '"]').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="teste1">
  <ul>
    <li>
      <input type="checkbox" value="00" checked="true">
      <input type="text" id="pai" >teste
      <ul>
        <li>
          <input type="checkbox" value="01">
          <input type="text">item pai
          <ul>
            <li>
              <input type="checkbox" value="01">
              <input type="text">item filho</li>
            <li>
              <input type="checkbox" value="01">
              <input type="text" data-herdar="pai" ><b><em>Este input herdará do primeiro</em>   </b></li> 
          </ul>
        </li>
        <li>
          <input type="checkbox" value="04">
          <input type="text">item irmão</li>
      </ul>
    </li>
  </ul>
</div>

As in the example above, you set the id of the element to be inherited, and in the element that will inherit it if you add the attribute data-herdar , which will receive this id of the inherited element. Done, script does the rest.

Note: whenever you want to work with the manipulation of new taxes, in general, the prefix data- is used, so there are no conflicts, besides being a "universal" specification.

score 0 · Answer 2

Just add in the if condition to ignore the element itself being changed.

PS: You were running the same selector 3 times, this has an unnecessary cost to the browser, I saved the result of that selector inside a variable to search only once, so it improves performance.

$('input:text').change(function(){
   var id = $(this).attr('id');

   var filho = $(this).parent().find('input:text');

   if (filho.attr('herdar') == id && filho.prop('id') != id) {
       filho.val(id);
   }
});