jquery - jquery遍历表

Question

当我单击链接“zmeniť pozíciu”时，我想将其最接近的 img 保存到变量。

<table border="1">
    <tbody> 
        <tr>        
            <th rowspan="3">1</th>
            <th>Nadpis</th>
            <td colspan="9">Eiusmod tempor</td>
            <td> <a href="#">zmeniť</a> </td>
            <td rowspan="3"> <a class="zmenit-poziciu" href="#">zmeniť pozíciu</a> </td>
        </tr>
        <tr>
            <th>Text</th>
            <td colspan="9">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam ...
            </td>
            <td> <a href="#">zmeniť</a> </td>
        </tr>
        <tr class="obrazok">
            <th>Obrázok</th>
            <td colspan="9"> <img alt="img" src="http://lorempixel.com/500/120/sports/1"> </td>
            <td ><a href="#">zmeniť</a></td>

        </tr>

    </tbody>
</table>

我试过了，但它不起作用

$(".zmenit-poziciu").click(function() {

        var img = $(this).parent().closest("obrazok").html();
        alert(img);
        return false
    });

演示

Answer 1

使用了错误的选择器。

改变：-

var img = $(this).parent().closest("obrazok").html();

到：-

var img = $(this).parent().closest(".obrazok").html();

使用您当前的选择器，您实际上是在寻找一个名为 obrazok 的标签，我猜您的文档中没有该标签。

Answer 2

Closest 为您提供与层次结构较高的选择器匹配的最接近的元素。文档

从文档：

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

在您的情况下，从单击的链接查看时，层次结构中的tr匹配.obrazok并不更高。

您将需要遍历 DOM 并获取 DOM 中最近的元素的东西。我为另一个我认为应该有帮助的问题发布的这个答案：https ://stackoverflow.com/a/12873187/921204

你可以像这样使用它：

$(".zmenit-poziciu").click(function() {
    var img = nextInDOM('.obrazok', $(this));
    alert(img);
    return false
});

Answer 3

你可以得到这样的图像

$(".zmenit-poziciu").click(function () {
  var img = $(this)
            .closest('tr') // get to the tr level
            .nextAll(".obrazok:first") // find the next tr sibling with class=obrazok
            .find('img'); // find the img
  alert(img.attr('src'));
  return false;
});

http://jsfiddle.net/wirey00/Z5CeE/