jQuery获取同一级别的特定元素

Question

我有以下结构：

＆＃13;

＆＃13;

<tr id="Test-Maschine">
  <td><b>Test-Maschine</b>
  </td>
  <td class="ip">127.0.0.1</td>
  <td id="127.0.0.1">
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-default" onclick="rebootMachine('machine.ip')">Reboot</button>
  </td>
  <td>
    <form action="create/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="Test-Maschine" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link">Container installieren</button>
    </form>
  </td>
</tr>

<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp; CDummyContainer</td>
  <td></td>
  <td>
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-link" onclick="startContainer('127.0.0.1','CDummyContainer')">Start</button>
    <button type="button" class="btn btn-link" onclick="stopContainer('127.0.0.1','CDummyContainer')">Stop</button>

    <form action="delete/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="CDummyContainer" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link" onclick="deleteContainer('127.0.0.1','CDummyContainer')">Delete</button>
    </form>

  </td>
</tr>


<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp; Container1</td>
  <td></td>
  <td>
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-link" onclick="startContainer('127.0.0.1','Container1')">Start</button>
    <button type="button" class="btn btn-link" onclick="stopContainer('127.0.0.1','Container1')">Stop</button>

    <form action="delete/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="Container1" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link" onclick="deleteContainer('127.0.0.1','Container1')">Delete</button>
    </form>

  </td>
</tr>


<tr id="FritzBox">
  <td><b>FritzBox</b>
  </td>
  <td class="ip">127.0.0.2</td>
  <td id="127.0.0.2">
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-default" onclick="rebootMachine('machine.ip')">Reboot</button>
  </td>
  <td>
    <form action="create/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="FritzBox" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link">Container installieren</button>
    </form>
  </td>
</tr>

<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp; FDummyContainer</td>
  <td></td>
  <td>
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-link" onclick="startContainer('127.0.0.2','FDummyContainer')">Start</button>
    <button type="button" class="btn btn-link" onclick="stopContainer('127.0.0.2','FDummyContainer')">Stop</button>

    <form action="delete/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="FDummyContainer" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link" onclick="deleteContainer('127.0.0.2','FDummyContainer')">Delete</button>
    </form>

  </td>
</tr>


<tr>
  <td>&nbsp;&nbsp;&nbsp;&nbsp; PythonContainer</td>
  <td></td>
  <td>
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>
  <td>
    <button type="button" class="btn btn-link" onclick="startContainer('127.0.0.2','PythonContainer')">Start</button>
    <button type="button" class="btn btn-link" onclick="stopContainer('127.0.0.2','PythonContainer')">Stop</button>

    <form action="delete/" method="post" style="display: inline !important;">
      <input type='hidden' name='csrfmiddlewaretoken' value='FsxictNZ43bTBskPIiopyZ7BfOkUUFtj' />
      <input type="hidden" value="PythonContainer" name="mytextbox" size="1" />
      <button type="submit" value="Click" name="mybtn" class="btn btn-link" onclick="deleteContainer('127.0.0.2','PythonContainer')">Delete</button>
    </form>

  </td>
</tr>

＆＃13;

＆＃13;

＆＃13;

简而言之，输出：

＆＃13;

＆＃13;

Table:
- Machine
- Container
- Container
- Machine
- Container
// and so on

＆＃13;

＆＃13;

＆＃13;

机器和容器都在同一级别：as。 现在我想让上一台机器的所有容器（不包括机器）来处理它们的在线状态，这是

＆＃13;

＆＃13;

<td id="127.0.0.1">
    <button type="button" class="btn btn-link" disabled="disabled">...</button>
  </td>

＆＃13;

＆＃13;

＆＃13;

我试过

＆＃13;

＆＃13;

$('.btn').filter(function(i, v) {
                            return $(v).parent().parent().prev().children(':first').children(':first').text() == "{{machine.name}}" && $(v).parent().prev().text() == '';
                        }).text("off").removeClass('btn-link').addClass('btn-danger');

＆＃13;

＆＃13;

＆＃13;

但显然这只适用于一个元素，而不适用于以下n个元素。

Answer 1

如果您使用<tbody>创建群组，可能会简化此操作。您可以在表格中拥有任意数量的<tbody>

<table>
   <tbody>
        <tr class="machine">...
        <tr class="container">...
        <tr class="container">...
   </tbody>
   <tbody>
        <tr class="machine">...
        <tr class="container">...
        <tr class="container">...
   </tbody>
</table>

然后当迭代机器类时，它的关联容器就是它的兄弟姐妹

$('tr.machine').each(function(){
   var myContainers = $(this).siblings();
})