JQuery - динамический выбор входов с «nth»

Question

У меня вопрос, что я застрял. У меня есть форма и вы хотите динамически иметь возможность вызывать n-й набор полей ввода в форме, чтобы использовать их в уравнениях, которые будут выводить n-й набор ответов. Например, «footage2» следует подключить к уравнению, которое даст мне «postQuantity2», а затем «footage3» следует использовать для определения «postQuantity3». Проблема в том, что форма может добавлять области ввода динамически, поэтому я не могу просто жестко закодировать ее, чтобы делать то, что хочу. Любые идеи о том, как получить n-й набор чисел, которые будут использоваться для уравнения, а затем дать мне n-й набор ответов? Если кто-нибудь может объяснить, как это будет работать, или просто указать, как это было бы не очень полезно! Благодаря!

Предлагаем фрагмент кода - http://jsfiddle.net/gv0029/QGW7R/ - чтобы дать вам общее представление о том, с чем я работаю, и вот некоторые html и js.

HTML

<fieldset id="fence"> 
    <div id="inputFence1" class="clonedInputFence"> 
     <fieldset id="fenceDescripton"> 
      <legend><strong>Fence Description</strong> 

      </legend> 
      <label>Footage: 
      <input type="number" id="footage" name="footage" value="" /></label> 
      <select name="fenceHeight" id="fenceHeight"> 
       <option value="select">Select Fence Height</option> 
       <option value="6" id="fH6">6 Ft.</option> 
       <option value="8" id="fH8">8 Ft.</option> 
      </select> 
     </fieldset> 

     <fieldset id="post"> 
      <legend><strong>Post Type</strong> 

      </legend> 

      <label>Post Quantity: 
       <input type="postQuantity" name="postQuantity" id="postQuantity" value="" /> 
      </label> 
      <select name="postMeasurements" id="postMeasurements"> 
       <option value="select">Select Post Measurements</option> 
       <option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option> 
       <option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option> 
      </select> 
     </fieldset> 

    </div> 
</fieldset> 
    <div> 
     <input type="button" id="btnAddFence" value="Add Another Fence" /> 
     <input type="button" id="btnDelFence" value="Remove Fence" /> 
    </div> 

JS

//Quantity for Posts 
    $('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){ 

      var footage = parseFloat($(':input[name="footage"]').val(),10); 
      var total = ''; 

      if(!isNaN(footage)){ 
       total = Math.ceil(footage /7); 
       $(':input[name="postQuantity"]').val(total.toString()); 
      } else { 
       $(':input[name="postQuantity"]').val(""); 
      } 
    }); 

//Dynamic Fence Input Fields 
    $('#btnAddFence').click(function() { 
       var num  = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
       var newNum = new Number(num + 1);  // the numeric ID of the new input field being added 

       // create the new element via clone(), and manipulate it's ID using newNum value 
       var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum); 

       //Fieldset creation 
       newElem.find('fieldset').attr('id', 'fence' + newNum); 

       //Fence Description 
       newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum); 
       newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + newNum); 

       //Post Type 
       newElem.find(':input[name="postQuantity"]').attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum); 
       newElem.find("select[name=postMeasurements]").attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum); 

       // insert the new element after the last "duplicable" input field 
       $('#inputFence' + num).after(newElem); 

       // enable the "remove" button 
       //$('#btnDel').attr('disabled',''); 
       $('#btnDelFence').removeAttr('disabled'); 
      }); 

      $('#btnDelFence').click(function() { 
       var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
       $('#inputFence' + num).remove();  // remove the last element 

       // enable the "add" button 
       //$('#btnAdd').attr('disabled',''); 
       $('#btnAddFence').removeAttr('disabled'); 

       // if only one element remains, disable the "remove" button 
       if (num-1 == 1) 
        $('#btnDelFence').attr('disabled','disabled'); 
      }); 

      $('#btnDelFence').attr('disabled','disabled'); 

Answer 1

Я не думаю, что п-й ребенок будет работать в этом случае, так как есть несколько дочерних элементов и оп хочет, чтобы соответствовать их.

На ваши кадры элементы, добавить атрибут данных, скажем, данные-какие-пару с рисунком, как

ид = п-данных какой-пара = п

$ ("# кадры "+ n) .click (function() { var n = $ (this) .attr (" data-which-pair "); Сделайте что-нибудь прохладное с помощью $ (" # postQuantity "+ n); }

Возможно, вы сможете просто выполнить функцию (n), но я обычно следую этому более длинному подходу, потому что легче видеть, что происходит. Имейте в виду, очевидно, что e выше - псевдокод, который вам нужно будет адаптировать.