Map specific parent td ID based on class

I'm having trouble getting this code to report EACH machine name that has a child td with a class of 'up_avail'. This code simply replies two times wtih the same machine name, rather than grabbing the two machine name which is intended.

Any help is appreciated.

<table border=1>
<th>Machine Name</th><th>Result</th><th>Status</th>
<tr>
<td class="tdresult" id="WN-MN161FY0X066">WN-MN161FY0X066</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U015">WD-ORA60YY1U015</td>
<td>Found</td>
<td class='up_success'>Complete</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U030">WD-ORA60YY1U030</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
</table>



Jquery:

$('#set_status').click(function() {
var arrayOfIds = $.map($(".up_avail"), function() {
return $('.up_avail').parent().parent().parent().find('.tdresult').attr("id");
});
alert(arrayOfIds);
});


Fiddle

https://jsfiddle.net/ge0yn8uc/7/

$('.up_avail').parent()...

.tdresult

3 Answers
3

You need to either loop through using .each or use map on the up_avail classes and return the IDs that way.

.each

$('#set_status').click(function() {
var arrayOfIds = $(".up_avail").map(function() { return $(this).parent().find('.tdresult').attr('id'); }).get();

alert(arrayOfIds);
});

.button {
width: 100px;
text-align: center;
background: green;
color: #fff;
padding: 5px;
margin: 10px
}

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<table border=1>
<tr>
<td class="tdresult" id="WN-MN161FY0X066">WN-MN161FY0X066</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U015">WD-ORA60YY1U015</td>
<td>Found</td>
<td class='up_success'>Complete</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U030">WD-ORA60YY1U030</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
</table>



It would be much easier to simply use .siblings('.tdresult') to map out all of the desired elements. From here, you can simply loop over the elements in question:

.siblings('.tdresult')

$('#set_status').click(function() {
var arrayOfIds = $.map($(".up_avail"), function() {
return $('.up_avail').siblings('.tdresult');
});

$.each(arrayOfIds, function(index, value) {
console.log(arrayOfIds[0][index].id);
});
});

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<table border=1>
<th>Machine Name</th>
<th>Result</th>
<th>Status</th>
<tr>
<td class="tdresult" id="WN-MN161FY0X066">WN-MN161FY0X066</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U015">WD-ORA60YY1U015</td>
<td>Found</td>
<td class='up_success'>Complete</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U030">WD-ORA60YY1U030</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
</table>



There's a simpler way, by using jQ's .siblings(), .get() and JS's .map()

.siblings()

.get()

.map()

$('#set_status').click(function() {

var arrayOfIds = $(".up_avail").siblings(".tdresult").get().map(function(el) {
return el.id;
});

alert(arrayOfIds);

});

.button {
width: 100px;
text-align: center;
background: green;
color: #fff;
padding: 5px;
margin: 10px
}

<table border=1>
<tr>
<td class="tdresult" id="WN-MN161FY0X066">WN-MN161FY0X066</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U015">WD-ORA60YY1U015</td>
<td>Found</td>
<td class='up_success'>Complete</td>
</tr>
<tr>
<td class="tdresult" id="WD-ORA60YY1U030">WD-ORA60YY1U030</td>
<td>Found</td>
<td class='up_avail'>New</td>
</tr>
</table>

<button id="set_status" class="button">Check</button>

//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Or by using ES6 flavor, taking advantage of arrow function and implicit return:

$('#set_status').click(function() {

var arrayOfIds = $(".up_avail").siblings(".tdresult").get().map(el => el.id);

alert(arrayOfIds);

});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.