jquery chaining not working in my html with each function

Question

Here is my html

<div  class="productcheck">

    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>
</div>
<div  class="productcheck">
    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>
</div>
<div  class="productcheck">
    <div class="expenserow1">
        <select name="product[]" class='product_name'>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
    <div class="expenserow2">
        <input type="text" name="productpercent[]" size=3 maxlength=3 value="100">
    </div>

</div>

JS:

<script>
$(document).ready(function(){
  $(".productcheck .expenserow2 input[type='text']").each(function() {
            var product_percentage=$(this).val();
            var product_name=$(this).closest('.product_name:selected').val();
            console.log(product_percentage);
  });
});
</script>

Im getting product_percentage value correctly, but not able to get product_name value.

Milind Anantwar · Accepted Answer · 2014-07-21 06:48:59Z

2

You need to use correct selector to target the select element. use:

$(this).parent().prev().find('.product_name').val();

Working Demo

answered Jul 21, 2014 at 6:48

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-07-21 06:48:25Z

2

Problem is with your selector. product_name is not a parent of textbox so your code is not working.

Use

var product_name = $(this)
    .closest('.productcheck') //traverse to parent productcheck
    .find('.product_name').val(); //Use .find() to search product_name You don't need selected here

DEMO

answered Jul 21, 2014 at 6:48

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

jquery chaining not working in my html with each function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related