Question

I have this drop down code:

$('#addDropdown').click(function() {
   var $d = $('<select class="dropdown"><option selected="selected" value="null" rel="null">Choose your data!</option><option value="1" rel="2">Option 1</option><option value="1" rel="2">Option 2</option><option value="14" rel="15">Option 3</option></select><input type="number" min="1" max="99" class="multiplier" name="multiplier" value="1" size="3"/><br/>').fadeIn().delay(1000);

   $('#dropdownContainer').append($d);
});

and I’m passing the values to an ajax function with this code, i use a button to append more drop downs with the same values:

    var dropdowns = $(".dropdown"),
        one = [],
        two = [],
        mult = [];

 for(var i = 0; i < dropdowns.length; i++) {
   one.push(dropdowns.eq(i).find('option:selected').attr('rel'));
   two.push(dropdowns.eq(i).val());
   mult.push(dropdowns.eq(i).val() * dropdowns.eq(i).find('input[name=multiplier]').val())
 }

for the multi option I want to take the value attribute that is selected and multiply it with the value from the number input… my selector isn’t working for the input, how can I select that multiplier input??

Answer 1

.find() only finds elements which are descendants of the currently matched set; since you want adjacent elements (siblings), use .next() (probably best in this case) or .siblings():

for(var i = 0; i < dropdowns.length; i++) {
   one.push(dropdowns.eq(i).find('option:selected').attr('rel'));
   two.push(dropdowns.eq(i).val());
   mult.push(dropdowns.eq(i).val() * dropdowns.eq(i).next('input[name=multiplier]').val())
}