获取下一个div中的每个元素

Question

我正在尝试弄清楚如何退出.staffSectionRow并进入下一个.permissionRow并从那里找到每个.fieldActive类并使用jquery更改内容文本。

**结构**

<div class='staffSectionRow'>
    // Your in here
</div>
<div class='permissionRow'>
    <table class='staffSectionField'>
         <tr class='staffSectionFieldRow>
             <td></td>
             <td></td>
             <td class='fieldActive'></td>
         </tr>
    </table>
    <table class='staffSectionField'>
         <tr class='staffSectionFieldRow>
             <td></td>
             <td></td>
             <td class='fieldActive'></td>
         </tr>
    </table>
    <table class='staffSectionField'>
         <tr class='staffSectionFieldRow>
             <td></td>
             <td></td>
             <td class='fieldActive'></td>
         </tr>
    </table>
</div>

我尝试了什么

$(this).parents(".staffSectionRow").next('.permissionsRow', function(){
   $(".fieldActive").each(function(){
      $(".fieldActive").text("Enter text here");
   });
});

Answer 1

以下是您正在寻找的内容：

$(this).parents(".staffSectionRow").next(".permissionRow").find(".fieldActive").each(function(){
      $(this).text("Enter text here");
   });
});

在伪代码中：

1. 找到.staffSectionRow
2. 转到下一个.permissionRow
3. 找到它的后代.fieldActive元素
4. 为每个最后匹配的元素运行一个函数
5. 此函数将文本插入到运行.each的一个元素

Answer 2

首先是第一件事。你打破了HTML。 tr中的class属性需要用引号括起来。

然后你可以使用：

$(this).parent().next().find('.fieldActive').text("Enter text here");

1）使用.parent()

遍历父div

2）使用.next()或.next('.permissionsRow')

查找下一个兄弟div

3）使用.fieldActive

查找课程find('.fieldActive')的所有td

4）使用.text()设置文字。

<强> Working Demo

Answer 3

可能你应该考虑这个：

$('.staffSectionRow').click(function() {
   $(this).closest(".staffSectionRow").next()
          .find(".fieldActive").text("Enter text here");
});

＆＃13;

＆＃13;

$(function() {
  $('.staffSectionRow').click(function() {
    $(this).closest(".staffSectionRow").next()
      .find(".fieldActive").text("Enter text here");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='staffSectionRow'>
  // Your in here
</div>
<div class='permissionRow'>
  <table class='staffSectionField'>
    <tr class='staffSectionFieldRow'>
      <td></td>
      <td></td>
      <td class='fieldActive'></td>
    </tr>
  </table>
  <table class='staffSectionField'>
    <tr class='staffSectionFieldRow'>
      <td></td>
      <td></td>
      <td class='fieldActive'></td>
    </tr>
  </table>
  <table class='staffSectionField'>
    <tr class='staffSectionFieldRow'>
      <td></td>
      <td></td>
      <td class='fieldActive'></td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;