CODEWITHSUNDEEP
javascriptnode.jscheerio
wizencrowd
wizencrowd

Reputation: 53

Selecting children elements from a <ul>

So I want to select the "href" attribute from all the element that are in a list. So in my case I want to get link from the a element.

So I've trief 2 diffrent each loops.

Html and JS Example:

<ul id="product_list">
    <li>
        <div class="class1">
            <div class="class2>
                <div class="class3">
                    <span class="productPic"></span>
                    <a class="link" href="www.THISLINK.com"></a>
                </div>
                <div class="title"></div>
                <div class="logos"></div>
            </div>
        </div>
    </li>
    <li>
        <div class="class1">
            <div class="class2>
                <div class="class3">
                    <span class="productPic"></span>
                    <a class="link" href="www.THISLINK.com"></a>
                </div>
                <div class="title"></div>
                <div class="logos"></div>
            </div>
        </div>
    </li>
    <li>
        <div class="class1">
            <div class="class2>
                <div class="class3">
                    <span class="productPic"></span>
                    <a class="link" href="www.THISLINK.com"></a>
                </div>
                <div class="title"></div>
                <div class="logos"></div>
            </div>
        </div>
    </li>
</ul>

let $ = cheerio.load(resp);
        $('#product_list > li').each((index,element) => {
            console.log($this).children('.link').attr('href');
        }
        $('.link').each((index,element) => {
            console.log($this).attr('href')
        }

I'm only getting 'undefined' as result.

Upvotes: 0

Views: 271

Answers (3)

pguardiario
pguardiario

Reputation: 54984

With map and es6 you would do:

const hrefs = $('#product_list > li .link').map((i, el) => el.attr('href')).get()

Note the get() at the end which turns it into a js array

Upvotes: 0

Bastian Springer
Bastian Springer

Reputation: 281

First of all, it is called $(this) and not $this. This change will at least give you all the results you want. If you now just want the results that actually contain information, you should either use the second each loop or you can use $('[href]').

Upvotes: 0

Anton Korotkoff
Anton Korotkoff

Reputation: 48

$('#product_list .link').each(function(index, el){console.log($(el).attr('href'))})

Upvotes: 2

Related Questions