javascript - Excluding elements with certain classes in Puppeteer - Stack Overflow

admin管理员组

文章数量:1315966

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

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

Share Improve this question Follow edited Nov 20, 2018 at 5:32 Grant Miller 29.1k1616 gold badges155155 silver badges168168 bronze badges asked Nov 19, 2018 at 21:41 neo-technokerneo-technoker 38922 gold badges1111 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

: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
    };
  })
);

Just add :not(.hide) to your selector string:

page.$$eval("ul > li.title:not(.hide)", nodes =>

本文标签： javascriptExcluding elements with certain classes in PuppeteerStack Overflow