ruby on rails - Multiple plus and minus buttons in a table jquery do not work -


it simple question don't know how fix. have several rows , each row there 3 elements, minus-button, quantity , plus-button. ok when put rows inside table, buttons don't have effect on quantity field. moreover, i'm creating dynamic table rails wrote code rails generated in html. have tried , code is:

$('.add').click(function() {    if (!isnan($(this).prev().val()))      $(this).prev().val(+$(this).prev().val() + 1);    else      $(this).prev().val(0);  });  $('.sub').click(function() {    if ((!isnan($(this).next().val())) && ($(this).next().val() > 0))      $(this).next().val(+$(this).next().val() - 1);    else      $(this).next().val(0);  });
button {    margin: 4px;    cursor: pointer;  }  input {    text-align: center;    width: 40px;    margin: 4px;    color: salmon;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tbody>      <tr>        <td>          <button name="button" type="button" class="sub btn btn-default">-</button>        </td>        <td>          <input name="quantity" type="text" id="1" value="0" class="field" />        </td>        <td>          <button name="button" type="button" class="add btn btn-default">+</button>        </td>      </tr>      <tr>        <td>          <button name="button" type="button" class="sub btn btn-default">-</button>        </td>        <td>          <input name="quantity" type="text" id="2" value="0" class="field" />        </td>        <td>          <button name="button" type="button" class="add btn btn-default">+</button>        </td>      </tr>    </tbody>  </table>    <tbody>    <tr>      <td>        <button name="button" type="button" class="sub btn btn-default">-</button>      </td>      <td>        <input name="quantity" type="text" id="1" value="0" class="field" />      </td>      <td>        <button name="button" type="button" class="add btn btn-default">+</button>      </td>    </tr>    <tr>      <td>        <button name="button" type="button" class="sub btn btn-default">-</button>      </td>      <td>        <input name="quantity" type="text" id="2" value="0" class="field" />      </td>      <td>        <button name="button" type="button" class="add btn btn-default">+</button>      </td>    </tr>  </tbody>

you right marc b, thanks. found solution:

$(this).parent().prev().children(".field") 

$('.add').click(function() {    if (!isnan($(this).parent().prev().children(".field").val()))      $(this).parent().prev().children(".field").val(+$(this).parent().prev().children(".field").val() + 1);    else      $(this).parent().prev().children(".field").val(0);  });  $('.sub').click(function() {    if ((!isnan($(this).parent().next().children(".field").val())) && ($(this).parent().next().children(".field").val() > 0))      $(this).parent().next().children(".field").val(+$(this).parent().next().children(".field").val() - 1);    else      $(this).parent().next().children(".field").val(0);  });
button {    margin: 4px;    cursor: pointer;  }  input {    text-align: center;    width: 40px;    margin: 4px;    color: salmon;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <tbody>      <tr>        <td>          <button name="button" type="button" class="sub btn btn-default">-</button>        </td>        <td>          <input name="quantity" type="text" id="1" value="0" class="field" />        </td>        <td>          <button name="button" type="button" class="add btn btn-default">+</button>        </td>      </tr>      <tr>        <td>          <button name="button" type="button" class="sub btn btn-default">-</button>        </td>        <td>          <input name="quantity" type="text" id="2" value="0" class="field" />        </td>        <td>          <button name="button" type="button" class="add btn btn-default">+</button>        </td>      </tr>    </tbody>  </table>


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo