Question

我发布了一个问题next() not working并得到了一个很好的回复，但有人可以解释一下这里到底发生了什么：

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .closest('tr').siblings('tr').find("img.cc").hide();

Answer 1

<tr>                              <<-- 1.)    <<-- 6.)
  <td>
    <a href="#" class="xx"></a>               <<-- we start here
  </td>
  <td>
    data
  </td>
</tr>
<tr>                              <<-- 2.)    <<--  5.)
  <td> 
    <img src="#" class="cc" />    <<-- 3.)    <<-- 4.)
  </td>
</tr>    
<tr>                              <<-- 6.)
  <td>
    <a href="#" class="xx"></a>
  </td>
  <td>
    data2
  </td>
</tr>
<tr>                              <<-- 6.)
  <td> 
    <img src="#" class="cc" />    <<-- 7.)
  </td>
</tr>

1。） $(this).closest('tr')

此行跳至1.）
2。） .next('tr')

我们到达2。）
3。） .find("img.cc")

现在，我们希望在3.）
4。） .toggle()

我们从元素 4切换visibilty。）（可见/隐藏）
5。） .closest('tr')

我们跳回最近的父tr
6。） siblings('tr')

我们会收到标有 6的所有tr's。）
7。） .find("img.cc").hide();

在所有兄弟姐妹中找到img.cc tr's - ＆gt; 6.）并隐藏它们。

Answer 2

它执行以下操作，每个步骤都与名为

的方法相关

.closest('tr') - 从当前元素到最近的<tr>祖先（或者它本身，如果它已经是<tr>）。
.next('tr') - 转到下一个兄弟行
.find("img.cc") - 在该行中找到<img class="cc">
.toggle() - 切换它（显示隐藏，隐藏，如果显示）
.closest('tr') - 返回<tr>
.siblings('tr') - 选择所有兄弟（其他）行
.find("img.cc") - 找到其中的所有<img class="cc">。
.hide() - 隐藏它们

虽然使用.end()跳回链中可能会更有效率，例如：

$(this).closest('tr').next('tr').find("img.cc").toggle()
       .end().siblings('tr').find("img.cc").hide();

Answer 3

此代码可能取自function的上下文

第一行说的是：

从this（被调用的元素）开始，找到最近的（父）tr然后查找next tr（意思是{的兄弟） {1}}父级）和this find img的“cc”和class的{{1}}值（意思是，如果它可见则隐藏如果它的隐藏显示它。

第二行从它完成的地方开始，并说在最近的（父）toggle中找到display img的“{1}} { {1}}下一个class并隐藏它。

Answer 4

在下一个表格行中切换img.cc的可见性，并隐藏表格中的所有其他img.cc。

这个jquery代码的含义

4 个答案: