jQuery在同一级别上获取特定元素

Question

我有以下结构：

 <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> 

简而言之，作为输出：

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

机器和容器都处于同一级别：与。 现在，我想获取前一台机器的所有容器（不包括机器）来调整其在线状态，即

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

我试过了

 $('.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'); 

但显然，这仅适用于一个元素，不适用于以下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();
})