.next(" .myClass")Not Working Jquery

时间:2014-10-20 12:05:02

标签: javascript jquery next

我不知道如何获得我想要的价值我尝试过很多东西,但我不知道如何找到自己的价值。 这是我的HTML:

<table class="liste">
    <tbody>
        <tr>
            <th>Actions</th>
            <th>Nom</th>
            <th>Coordonnées</th>
            <th>Diplômes</th>
            <th>Profil associé</th>
        </tr>
        <tr>
            <td class="groupe" colspan="5">2014-2015            
                <button class="copyMails" title="Copier les adresses emails">
                     <img src="/images/picto/action_dupliquer.png" alt="">
                    Copier les adresses emails
                </button>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="lstMails" value="myText">
            </td>
        </tr>
        <tr>
            <th>Actions</th>
            <th>Nom</th>
            <th>Coordonnées</th>
            <th>Diplômes</th>
            <th>Profil associé</th>
        </tr>
        <tr>
            <td class="groupe" colspan="5">2014-2015            
                <button class="copyMails" title="Copier les adresses emails">
                     <img src="/images/picto/action_dupliquer.png" alt="">
                    Copier les adresses emails
                </button>
            </td>
        </tr>
        <tr>
            BLABLABLA
        </tr>
        <tr>
            BLABLABLA
        </tr>
        <tr>
            <td>
                <input type="text" class="lstMails" value="myText2">
            </td>
        </tr>
    </tbody>
</table>

这是我的JS:

$("body").on('click', ".copyMails", function() {
    console.log($(this).parent().parent().parent().next('.lstMails').val());
});

我和父母一起尝试过的越来越少等等。但我不知道该怎么做。 当我点击按钮.copyMails

时,我想访问下一个.lstMails

2 个答案:

答案 0 :(得分:3)

您需要找到下一个tr兄弟,然后找到其中的lstMails元素

&#13;
&#13;
$("body").on('click', ".copyMails", function() {
  $('#log').html($(this).closest('tr').nextAll('tr:has(.lstMails)').first().find('.lstMails').val());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="liste">
  <tbody>
    <tr>
      <th>Actions</th>
      <th>Nom</th>
      <th>Coordonnées</th>
      <th>Diplômes</th>
      <th>Profil associé</th>
    </tr>
    <tr>
      <td class="groupe" colspan="5">2014-2015
        <button class="copyMails" title="Copier les adresses emails">
          <img src="/images/picto/action_dupliquer.png" alt="">Copier les adresses emails
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" class="lstMails" value="myText">
      </td>
    </tr>
    <tr>
      <th>Actions</th>
      <th>Nom</th>
      <th>Coordonnées</th>
      <th>Diplômes</th>
      <th>Profil associé</th>
    </tr>
    <tr>
      <td class="groupe" colspan="5">2014-2015
        <button class="copyMails" title="Copier les adresses emails">
          <img src="/images/picto/action_dupliquer.png" alt="">Copier les adresses emails
        </button>
      </td>
    </tr>
    <tr>
      <td>BLABLABLA</td>
    </tr>
    <tr>
      <td>BLABLABLA</td>
    </tr>
    <tr>
      <td>
        <input type="text" class="lstMails" value="myText2">
      </td>
    </tr>
  </tbody>
</table>

<div id="log"></div>
&#13;
&#13;
&#13;

您的代码获取了所点击按钮的tbody祖先,然后尝试查找具有类lstMails的下一个兄弟 - 这不是您所追求的。

答案 1 :(得分:3)

您应该使用closest()导航父tr,然后使用next()指向下一个tr,然后您可以使用find()

使用

$("body").on('click', ".copyMails",function(){
    console.log($(this).closest('tr').next('tr').find('.lstMails').val());
});

更新

$("body").on('click', ".copyMails", function() {
    alert($(this).closest('tr').nextAll('tr:has(.lstMails)').find('.lstMails').val());
});