jQuery: Trying to get value out of items in jQuery object

I’m sure this question puts the duh in dumb, but I’m having a hell of a time figuring it out.

So I have:
• a jQuery object, which is a collection of lis each with a url as the content.

I want to get the urls, so I can:
• load the related page, via .load or a similar method

I’m fairly sure once I can individually .load the items I can then select up the elements I want and then append them to the dom.

But I’m stuck at trying to get the URLs out so that I can use them in a loop of some sort.

Can you post the code you’re working with? High level descriptions often hide the important details.

I gotcha :wink:

Here’s the essential info

<div id="product_recommendations">
   <ul>
       <li>https://www.example.com/product1-toothbrush.html</li>
       <li>https://www.example.com/product2-tarter-control.html</li>
       <li>https://www.example.com/greenies-fedivne-dental-treats-00.html</li>
       <li>https://www.example.com/product4-drinking-water-additive-8oz.html</li>
   </ul>
</div>

And here’s my current state of code:

$(document).ready(function($){
    let products = $("#product_recommendations li").each(function(item){
        var to_load = $(this).html();
    });
    console.log(to_load);
    // for(let i = 0; i < products.length; i++){
    //     // soooooo
    //     var test = products[i].html();
    //     console.log(test);
    // }
});

So the only issue I’m seeing here is that you’re declaring var to_load inside of your each() callback. This means you’re creating a new variable called to_load, which is only accessible inside of a single, anonymous function, and then gets destroyed when the function finishes. Change things around a bit to see the URLs. A note here about naming conventions, snake_case is more of a python or PHP thing. In JavaScript, we much prefer camelCase, and in HTML we prefer kabab-case:

$(document).ready(function($){
    let products = $("#product-recommendations li").each(function(item){
        var toLoad = $(this).html();
        console.log(toLoad);
    });
});

Duely noted on the formatting front.

I generally find camel case difficult to read, so I tend to snake_case things. I recognize that I’m probably a little weird that way.

I’ll try your changes and see what happens.

While I’m still not quite getting the results I desire, I am now getting a plain array of stuff. :smiley:

Yeah it’s still using snake_case for now. It’s easier/faster to read for me so I’m sticking with it till the proof of concept is working. :wink:

$(document).ready(function($){
    // collect the containing elements
    const products = $("#product_recommendations li");
    // make a new array that contains ONLY the urls -- look into how this works
    let prod_links = products.map(function(){
        // don't forget to use the GD `return` keyword
        return $(this).text();
    }).get(); // turns the resulting jQuery object into just the mapped array
    
    // the next step is to take the links and load them into a new div, and then add it to the existing element after clearing the old one.
    
});

I prefer using underscores too when referring to html elements. So keep in mind it’s all a preference thing. The main thing is to be consistent.