Jquery使用JQuery将类添加到标记中的下一个图像

Question

如何使用jQuery将类添加到下一个图像？

我在网页中使用for循环设置了一组图像。它们显示在表格行中。

<table class="table table-bordered">
  <?php
    <td><img class="img1" src="http://s5.tinypic.com/30v0ncn_th.jpg"/></td>

    for ($x = 0; $x < 5; $x++) { ?>
      <td>
        <img class="loopimg" src="http://s5.tinypic.com/30v0ncn_th.jpg"/>
      </td>
    <?php  } ?>
</table>

我想要实现的是当我点击第一张图片（class =“img1”）时，它会将类添加到下一张图片，点击它会将类添加到下一张图片。

$('.img1').click(function(){
  $(this).parent().next("td").addClass("active");
  alert("class");
});

此Jquery代码将“active”类添加到下一个<td>标记，我希望将类添加到下一个图像。提前谢谢

Answer 1

虽然你的下一个标签是td并且你想要为它的子图像添加类，你必须使用像这样的jquery库的子函数

  $(document).ready(function(){     
            $('.img1').click(function(){

         $(this).parent().next("td").children( "img" ).addClass("active");

        alert("class");
        });
        });

Answer 2

首先请注意，您的HTML无效，因为您需要<tr>包装所有<td>。

要解决您的问题，您可以从点击的tr元素中获取父img，然后找到其中的第一个.loopimg元素，如下所示：

$('.img1').click(function(){
  $(this).closest('tr').find('.loopimg:first').addClass("active");
});

您的PHP语法也存在一些主要问题 - 但是我会假设这些只是由您将代码转录到问题引起的，因为它在当前状态下根本不起作用

Answer 3

将类添加到td children：

$('.table .img').click(function(){
    $(this).parent().next("td").children('img').addClass("active");
    alert("class");
});

我将选择器更改为 .table .img 以处理任何表格图像。