Sylverblade Sylverblade - 4 months ago 19
jQuery Question

jQuery get specific element on same level

I have the following structure:



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





In short as output:



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





Machines and Containers are both on the same level: as .
Now I want to get all the Containers of the previous Machine excluding the Machine to manupulate their online status, which is



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





I tried



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





But obviously that only works for ONE element, not for the following n more elements.

Answer

Would probably simplify this if you used <tbody> to create groups. You can have as many <tbody> as you want in a table

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

Then when iterating machine class it's associated containers would be it's siblings

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