jquery map with conditionsIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
Why is it that the natural deduction method can't test for invalidity?
French for 'It must be my imagination'?
A Note on N!
Noun clause (singular all the time?)
Any examples of headwear for races with animal ears?
Is there any limitation with Arduino Nano serial communication distance?
Shrinkwrap tetris shapes without scaling or diagonal shapes
Why do Computer Science majors learn Calculus?
Apply MapThread to all but one variable
Unexpected email from Yorkshire Bank
US visa is under administrative processing, I need the passport back ASAP
What do the phrase "Reeyan's seacrest" and the word "fraggle" mean in a sketch?
How to get a plain text file version of a CP/M .BAS (M-BASIC) program?
How to verbalise code in Mathematica?
What does KSP mean?
How to stop co-workers from teasing me because I know Russian?
Reducing vertical space in stackrel
Packing rectangles: Does rotation ever help?
What's the polite way to say "I need to urinate"?
With a Canadian student visa, can I spend a night at Vancouver before continuing to Toronto?
What is the strongest case that can be made in favour of the UK regaining some control over fishing policy after Brexit?
Rivers without rain
How to reduce LED flash rate (frequency)
Examples of non trivial equivalence relations , I mean equivalence relations without the expression " same ... as" in their definition?
jquery map with conditions
Is there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
Is there a way to add a condition to a map function?
I'm trying to get the computer names of workstations that are win7 and ready, omitting the win10 machines.
Is there any good way to get the 2 workstations using the map command or should I look for a different approach?
$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>https://jsfiddle.net/mLf5az63/3/
jquery
edited Mar 22 at 18:27
j08691
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
add a comment |
0
Is there a way to add a condition to a map function?
I'm trying to get the computer names of workstations that are win7 and ready, omitting the win10 machines.
Is there any good way to get the 2 workstations using the map command or should I look for a different approach?
$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>https://jsfiddle.net/mLf5az63/3/
jquery
edited Mar 22 at 18:27
j08691
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
add a comment |
0
0
0
Is there a way to add a condition to a map function?
I'm trying to get the computer names of workstations that are win7 and ready, omitting the win10 machines.
Is there any good way to get the 2 workstations using the map command or should I look for a different approach?
$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>https://jsfiddle.net/mLf5az63/3/
jquery
edited Mar 22 at 18:27
j08691
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
Is there a way to add a condition to a map function?
I'm trying to get the computer names of workstations that are win7 and ready, omitting the win10 machines.
Is there any good way to get the 2 workstations using the map command or should I look for a different approach?
$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>https://jsfiddle.net/mLf5az63/3/
$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>$('#get').click(function()
var grids = $('.highlight').map(function()
return this.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>jquery
jquery
edited Mar 22 at 18:27
j08691
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
edited Mar 22 at 18:27
j08691
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
edited Mar 22 at 18:27
j08691
168k20199215
edited Mar 22 at 18:27
j08691
168k20199215
edited Mar 22 at 18:27
j08691
168k20199215
168k20199215
asked Mar 22 at 18:23
spas2kspas2k
321313
asked Mar 22 at 18:23
spas2kspas2k
321313
asked Mar 22 at 18:23
spas2kspas2k
321313
321313
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
You can do it this way:
$('#get').click(function ()
var grids = $('.highlight').map(function ()
var type = $(this).next('td')[0].innerText;
var status = $(this).next('td').next('td')[0].innerText;
if(type == 'win7' && status == 'ready')
return this.id;
).get().join();
console.log(grids);
);
I have updated your JS fiddle as well, you can test there.
https://jsfiddle.net/yov7ugjx/2/
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
add a comment |
1
.map is probably a good solution, combined with .filter, if you don't have too many elements. This is even possible without using jQuery at all like so.
document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>answered Mar 22 at 18:43
lumiolumio
5,14722239
add a comment |
1
One approach you could do is to put the children details on the tr as data elements. Then after finding the highlighted elements, you can find their parent rows, filter on the ones you want, and then perform your map.
$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55305734%2fjquery-map-with-conditions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can do it this way:
$('#get').click(function ()
var grids = $('.highlight').map(function ()
var type = $(this).next('td')[0].innerText;
var status = $(this).next('td').next('td')[0].innerText;
if(type == 'win7' && status == 'ready')
return this.id;
).get().join();
console.log(grids);
);
I have updated your JS fiddle as well, you can test there.
https://jsfiddle.net/yov7ugjx/2/
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
add a comment |
1
You can do it this way:
$('#get').click(function ()
var grids = $('.highlight').map(function ()
var type = $(this).next('td')[0].innerText;
var status = $(this).next('td').next('td')[0].innerText;
if(type == 'win7' && status == 'ready')
return this.id;
).get().join();
console.log(grids);
);
I have updated your JS fiddle as well, you can test there.
https://jsfiddle.net/yov7ugjx/2/
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
add a comment |
1
1
1
You can do it this way:
$('#get').click(function ()
var grids = $('.highlight').map(function ()
var type = $(this).next('td')[0].innerText;
var status = $(this).next('td').next('td')[0].innerText;
if(type == 'win7' && status == 'ready')
return this.id;
).get().join();
console.log(grids);
);
I have updated your JS fiddle as well, you can test there.
https://jsfiddle.net/yov7ugjx/2/
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
You can do it this way:
$('#get').click(function ()
var grids = $('.highlight').map(function ()
var type = $(this).next('td')[0].innerText;
var status = $(this).next('td').next('td')[0].innerText;
if(type == 'win7' && status == 'ready')
return this.id;
).get().join();
console.log(grids);
);
I have updated your JS fiddle as well, you can test there.
https://jsfiddle.net/yov7ugjx/2/
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
edited Mar 22 at 19:57
Wai Ha Lee
6,180124166
6,180124166
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
answered Mar 22 at 18:57
Rohit ShettyRohit Shetty
32417
32417
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
add a comment |
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
Looks like the best answer. Thanks!
– spas2k
Mar 22 at 19:00
add a comment |
1
.map is probably a good solution, combined with .filter, if you don't have too many elements. This is even possible without using jQuery at all like so.
document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>answered Mar 22 at 18:43
lumiolumio
5,14722239
add a comment |
1
.map is probably a good solution, combined with .filter, if you don't have too many elements. This is even possible without using jQuery at all like so.
document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>answered Mar 22 at 18:43
lumiolumio
5,14722239
add a comment |
1
1
1
.map is probably a good solution, combined with .filter, if you don't have too many elements. This is even possible without using jQuery at all like so.
document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>answered Mar 22 at 18:43
lumiolumio
5,14722239
.map is probably a good solution, combined with .filter, if you don't have too many elements. This is even possible without using jQuery at all like so.
document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>document.getElementById('get').addEventListener('click', () =>
const grids = Array.from(document.querySelectorAll('tr'))
.map(line => )
// Only return item when it is tru'ish
.filter(item => item);
console.log(grids);
);<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr>
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr>
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr>
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<button id='get'>Get</button>answered Mar 22 at 18:43
lumiolumio
5,14722239
answered Mar 22 at 18:43
lumiolumio
5,14722239
answered Mar 22 at 18:43
lumiolumio
5,14722239
answered Mar 22 at 18:43
lumiolumio
5,14722239
5,14722239
add a comment |
add a comment |
1
One approach you could do is to put the children details on the tr as data elements. Then after finding the highlighted elements, you can find their parent rows, filter on the ones you want, and then perform your map.
$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
add a comment |
1
One approach you could do is to put the children details on the tr as data elements. Then after finding the highlighted elements, you can find their parent rows, filter on the ones you want, and then perform your map.
$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
add a comment |
1
1
1
One approach you could do is to put the children details on the tr as data elements. Then after finding the highlighted elements, you can find their parent rows, filter on the ones you want, and then perform your map.
$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
One approach you could do is to put the children details on the tr as data elements. Then after finding the highlighted elements, you can find their parent rows, filter on the ones you want, and then perform your map.
$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>$('#get').on('click', function()
var grids = $('.highlight')
.closest('tr')
.filter(function()
return this.dataset.os === 'win7' && this.dataset.status === 'ready'
)
.map(function()
return this.dataset.id;
).get().join();
console.log(grids);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<th>Workstation</th>
<th>Version</th>
<th>Status</th>
<tr data-id="mac1" data-os="win7" data-status="ready">
<td id="mac1" class='highlight'>mac1</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac2" data-os="win7" data-status="not ready">
<td>mac2</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac3" data-os="win10" data-status="ready">
<td id="mac3" class='highlight'>mac3</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac4" data-os="win10" data-status="ready">
<td>mac4</td>
<td>win10</td>
<td class='status'>ready</td>
</tr>
<tr data-id="mac5" data-os="win7" data-status="not ready">
<td>mac5</td>
<td>win7</td>
<td class='status'>not ready</td>
</tr>
<tr data-id="mac6" data-os="win7" data-status="ready">
<td id='mac6' class='highlight'>mac6</td>
<td>win7</td>
<td class='status'>ready</td>
</tr>
</table>
<div class='button' id='get'>Get</div>answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
answered Mar 22 at 18:46
TaplarTaplar
18.5k21529
18.5k21529
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55305734%2fjquery-map-with-conditions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
