Excluding elements with certain classes in Puppeteer
The HTML I am trying to parse with Puppeteer looks something like this:
<ul>
<li class="title"> item 1 </li>
<li class="title hide"> item 1 </li>
</ul>
And I am accessing the li elements like this:
await page.$$eval("ul > li.title", nodes =>
nodes.map(element => {
return {
//some attributes
};
})
);
The outcome extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.
How can I refactor the Puppeteer code to exclude elements with hide class?
javascript css node.js
google-chrome-devtools puppeteer edited Nov 20 at 5:32
Grant Miller
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
add a comment |
The HTML I am trying to parse with Puppeteer looks something like this:
<ul>
<li class="title"> item 1 </li>
<li class="title hide"> item 1 </li>
</ul>
And I am accessing the li elements like this:
await page.$$eval("ul > li.title", nodes =>
nodes.map(element => {
return {
//some attributes
};
})
);
The outcome extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.
How can I refactor the Puppeteer code to exclude elements with hide class?
javascript css node.js
google-chrome-devtools puppeteer edited Nov 20 at 5:32
Grant Miller
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
add a comment |
The HTML I am trying to parse with Puppeteer looks something like this:
<ul>
<li class="title"> item 1 </li>
<li class="title hide"> item 1 </li>
</ul>
And I am accessing the li elements like this:
await page.$$eval("ul > li.title", nodes =>
nodes.map(element => {
return {
//some attributes
};
})
);
The outcome extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.
How can I refactor the Puppeteer code to exclude elements with hide class?
javascript css node.js
google-chrome-devtools puppeteer edited Nov 20 at 5:32
Grant Miller
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
The HTML I am trying to parse with Puppeteer looks something like this:
<ul>
<li class="title"> item 1 </li>
<li class="title hide"> item 1 </li>
</ul>
And I am accessing the li elements like this:
await page.$$eval("ul > li.title", nodes =>
nodes.map(element => {
return {
//some attributes
};
})
);
The outcome extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.
How can I refactor the Puppeteer code to exclude elements with hide class?
javascript css node.js
google-chrome-devtools puppeteer javascript css node.js
google-chrome-devtools puppeteer edited Nov 20 at 5:32
Grant Miller
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
edited Nov 20 at 5:32
Grant Miller
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
edited Nov 20 at 5:32
Grant Miller
5,201132748
edited Nov 20 at 5:32
Grant Miller
5,201132748
edited Nov 20 at 5:32
Grant Miller
5,201132748
5,201132748
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
asked Nov 19 at 21:41
Theepan Thevathasasn
5819
5819
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
:not(.hide)
You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:
await page.$$eval('ul > li.title:not(.hide)', nodes =>
nodes.map(element => {
return {
// some attributes
};
})
);
.filter(e => !e.matches('.hide'))
On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:
await page.$$eval('ul > li.title', nodes =>
nodes.filter(e => !e.matches('.hide')).map(element => {
return {
// some attributes
};
})
);
answered Nov 20 at 5:28
Grant Miller
5,201132748
add a comment |
Just add :not(.hide) to your selector string:
page.$$eval("ul > li.title:not(.hide)", nodes =>
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
this is perfect.. is there a place I can learn more about what can go in thedocument.querySelector()?
– Theepan Thevathasasn
Nov 20 at 1:05
querySelectoraccepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible
– CertainPerformance
Nov 20 at 2:32
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
});
}
});
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%2f53383037%2fexcluding-elements-with-certain-classes-in-puppeteer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
:not(.hide)
You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:
await page.$$eval('ul > li.title:not(.hide)', nodes =>
nodes.map(element => {
return {
// some attributes
};
})
);
.filter(e => !e.matches('.hide'))
On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:
await page.$$eval('ul > li.title', nodes =>
nodes.filter(e => !e.matches('.hide')).map(element => {
return {
// some attributes
};
})
);
answered Nov 20 at 5:28
Grant Miller
5,201132748
add a comment |
:not(.hide)
You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:
await page.$$eval('ul > li.title:not(.hide)', nodes =>
nodes.map(element => {
return {
// some attributes
};
})
);
.filter(e => !e.matches('.hide'))
On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:
await page.$$eval('ul > li.title', nodes =>
nodes.filter(e => !e.matches('.hide')).map(element => {
return {
// some attributes
};
})
);
answered Nov 20 at 5:28
Grant Miller
5,201132748
add a comment |
:not(.hide)
You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:
await page.$$eval('ul > li.title:not(.hide)', nodes =>
nodes.map(element => {
return {
// some attributes
};
})
);
.filter(e => !e.matches('.hide'))
On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:
await page.$$eval('ul > li.title', nodes =>
nodes.filter(e => !e.matches('.hide')).map(element => {
return {
// some attributes
};
})
);
answered Nov 20 at 5:28
Grant Miller
5,201132748
:not(.hide)
You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:
await page.$$eval('ul > li.title:not(.hide)', nodes =>
nodes.map(element => {
return {
// some attributes
};
})
);
.filter(e => !e.matches('.hide'))
On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:
await page.$$eval('ul > li.title', nodes =>
nodes.filter(e => !e.matches('.hide')).map(element => {
return {
// some attributes
};
})
);
answered Nov 20 at 5:28
Grant Miller
5,201132748
answered Nov 20 at 5:28
Grant Miller
5,201132748
answered Nov 20 at 5:28
Grant Miller
5,201132748
answered Nov 20 at 5:28
Grant Miller
5,201132748
5,201132748
add a comment |
add a comment |
Just add :not(.hide) to your selector string:
page.$$eval("ul > li.title:not(.hide)", nodes =>
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
this is perfect.. is there a place I can learn more about what can go in thedocument.querySelector()?
– Theepan Thevathasasn
Nov 20 at 1:05
querySelectoraccepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible
– CertainPerformance
Nov 20 at 2:32
add a comment |
Just add :not(.hide) to your selector string:
page.$$eval("ul > li.title:not(.hide)", nodes =>
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
this is perfect.. is there a place I can learn more about what can go in thedocument.querySelector()?
– Theepan Thevathasasn
Nov 20 at 1:05
querySelectoraccepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible
– CertainPerformance
Nov 20 at 2:32
add a comment |
Just add :not(.hide) to your selector string:
page.$$eval("ul > li.title:not(.hide)", nodes =>
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
Just add :not(.hide) to your selector string:
page.$$eval("ul > li.title:not(.hide)", nodes =>
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
answered Nov 19 at 21:42
CertainPerformance
73.4k143455
73.4k143455
this is perfect.. is there a place I can learn more about what can go in thedocument.querySelector()?
– Theepan Thevathasasn
Nov 20 at 1:05
querySelectoraccepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible
– CertainPerformance
Nov 20 at 2:32
add a comment |
this is perfect.. is there a place I can learn more about what can go in thedocument.querySelector()?
– Theepan Thevathasasn
Nov 20 at 1:05
querySelectoraccepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible
– CertainPerformance
Nov 20 at 2:32
this is perfect.. is there a place I can learn more about what can go in the
document.querySelector()?– Theepan Thevathasasn
Nov 20 at 1:05
this is perfect.. is there a place I can learn more about what can go in the
document.querySelector()?– Theepan Thevathasasn
Nov 20 at 1:05
querySelector accepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible– CertainPerformance
Nov 20 at 2:32
querySelector accepts any valid CSS selector string - see here (including the links on the left of that page), they're really flexible– CertainPerformance
Nov 20 at 2:32
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53383037%2fexcluding-elements-with-certain-classes-in-puppeteer%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
