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> 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> 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> 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> 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();
})
Source (Stackoverflow)