Cheerio: .children() gets applied to all descendants not just immediate descendants

Created on 19 Dec 2011 · 9Comments · Source: cheeriojs/cheerio

See #6 for more information

❌ Bug

Source

matthewmueller

Most helpful comment

Do you plan to implement this? What about selectors like 'ul > li' to grab immediate children?

jmonster on 5 Feb 2012

🎉1 😄1

All 9 comments

Do you plan to implement this? What about selectors like 'ul > li' to grab immediate children?

jmonster on 5 Feb 2012

🎉1 😄1

I took a look at this earlier - this should be addressed in cheerio-soupselect. I'm hoping to close this bug this weekend.

Here's where the discussion will be: https://github.com/MatthewMueller/cheerio-soupselect/issues/7

matthewmueller on 5 Feb 2012

I'm not understanding the feature/bug here. I thought that .children() was supposed to return only the immediate descendants (see here). Could you perhaps provide a code example?

Currently it seems as thought:


var cheerio = require("cheerio"),
    $ = cheerio.load('<p><h1></h1><div><anotherd></anotherd></div></p>');

console.log($("p").children());

Returns the appropriate result:

{ '0': 
   { type: 'tag',
     name: 'h1',
     attribs: {},
     parent: 
      { type: 'tag',
        name: 'p',
        children: [Object],
        attribs: {},
        parent: [Object],
        prev: null,
        next: null },
     prev: null,
     next: 
      { type: 'tag',
        name: 'div',
        children: [Object],
        attribs: {},
        parent: [Object],
        prev: [Circular],
        next: null },
     children: [] },
  '1': 
   { type: 'tag',
     name: 'div',
     children: [ [Object] ],
     attribs: {},
     parent: 
      { type: 'tag',
        name: 'p',
        children: [Object],
        attribs: {},
        parent: [Object],
        prev: null,
        next: null },
     prev: 
      { type: 'tag',
        name: 'h1',
        attribs: {},
        parent: [Object],
        prev: null,
        next: [Circular],
        children: [] },
     next: null },
  length: 2 }

siddMahen on 7 Feb 2012

It's the selector that looks through the children when it shouldn't. Try:

var $ = cheerio.load('<html><body><h2 class = "header">Header</h2></body></html>')
$('html').children('.header');

I think this is best managed by adding a depth parameter in cheerio-soupselect. Anything else seems like a hack in the .find() function.

matthewmueller on 7 Feb 2012

Ahhh, I see the problem.

siddMahen on 7 Feb 2012

high fives for whoever implements depth + more css3-style selectors ("ul > li")

jmonster on 16 Feb 2012

:-) it's on my todo list but unfortunately my todo list is very long :-/

matthewmueller on 16 Feb 2012

You should be able to use Array.prototype.filter with the method you get from CSSselect as the only argument. (That should also be the most performant way.)

fb55 on 28 Aug 2012

This was indirectly resolved by commit 0464dd8b870e5b2cf04b934d8e79ae5e928a1c6f, and an regression test was added in commit 024ac31256c3fae1dc3189cba305aef29ddcc2ca.