How to select neighbor element in jquery (or javascript) - Stack Overflow

admin管理员组

文章数量:1389750

I have a HTML code like this:

<tr id="15">
    <td id="NV">1</td>
    <td class="hidden-mob">
        <a href="page.php"><i id="c-voteup" class="fa fa-caret-up"></i></a>
    </td>
<tr>

<tr id="16">
    <td id="NV">1</td>
    <td class="hidden-mob">
        <a href="page.php"><i id="c-voteup" class="fa fa-caret-up"></i></a>
    </td>
<tr>

Now I want to increase the value of the first <td> in which <tr> I click on its <i> (neighbor <td>).

For example: If I click of <i> where <tr id="15"> then I want to increase the value of its <td> like this: <td id="NV">2</td>. Is it possible ?

Here is my try: I can not implement it fully, just I know about it scatteredly ...

$("i").click(function(e) {}                            // when click on <i>

var value =  $("#NV").text().replace(/[^0-9]/g, '');   // getting current value

value++;                                              // increase its value

$("#NV").html(value);                                 // writing new value

Just my problem is selecting, How to select $("#NV") that I've clicked on <i> in the same <tr> ?

I have a HTML code like this:

<tr id="15">
    <td id="NV">1</td>
    <td class="hidden-mob">
        <a href="page.php"><i id="c-voteup" class="fa fa-caret-up"></i></a>
    </td>
<tr>

<tr id="16">
    <td id="NV">1</td>
    <td class="hidden-mob">
        <a href="page.php"><i id="c-voteup" class="fa fa-caret-up"></i></a>
    </td>
<tr>

Now I want to increase the value of the first <td> in which <tr> I click on its <i> (neighbor <td>).

For example: If I click of <i> where <tr id="15"> then I want to increase the value of its <td> like this: <td id="NV">2</td>. Is it possible ?

Here is my try: I can not implement it fully, just I know about it scatteredly ...

$("i").click(function(e) {}                            // when click on <i>

var value =  $("#NV").text().replace(/[^0-9]/g, '');   // getting current value

value++;                                              // increase its value

$("#NV").html(value);                                 // writing new value

Just my problem is selecting, How to select $("#NV") that I've clicked on <i> in the same <tr> ?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Sep 11, 2015 at 14:41 ShafizadehShafizadeh 10.4k1515 gold badges5858 silver badges9292 bronze badges 2

• .sibling() in jQuery. – Chrillewoodz Commented Sep 11, 2015 at 14:41
• @Chrillewoodz thanks, I read about it, I think it can be useful for my question. – Shafizadeh Commented Sep 11, 2015 at 14:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try this:

$("i").click(function (e) { // when click on <i>

    var $nv = $(this).closest('tr').find(".NV");
    var value = $nv.text().replace(/[^0-9]/g, ''); // getting current value

    value++; // increase its value

    $nv.html(value);

});

• Please change all #NV ids to class as IDs are supposed to be unique in DOM.

You can use $(this).closest('td').prev() to locate the td of interest. However, you must not use duplicate IDs.

$('a > i').on('click', function(e) {
    //prevent default action
    e.preventDefault();
    //locate the TD with value   
    var valTD = $(this).closest('td').prev();
    //increment it's value
    valTD.text( +valTD.text() + 1 );
});

$('a > i').on('click', function(e) {
    //prevent default action
    e.preventDefault();
    //locate the TD with value   
    var valTD = $(this).closest('td').prev();
    //increment it's value
    valTD.text( +valTD.text() + 1 );
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tbody>
  <tr id="15">
    <td>1</td>
    <td class="hidden-mob">
        <a href="page.php"><i class="fa fa-caret-up">x</i></a>
    </td>
<tr>

<tr id="16">
    <td>1</td>
    <td class="hidden-mob">
        <a href="page.php"><i class="fa fa-caret-up">x</i></a>
    </td>
<tr>
  </tbody>
  </table>

本文标签： How to select neighbor element in jquery (or javascript)Stack Overflow