What am I missing in the jQuery .each() function?

Question

I have this function that I am trying to figure out/fix and can't seem to pinpoint the issue / can't figure out a way to get it working.

Basically my CMS is spitting certain hrefs that I would like to:

Part 1) change the targeted href URL

Part 2) change the button's text

Right now I only have 2 instances of this type of button, so here's what is printing out in my console:

Part 1) for this part I get the correct urls without the characters i want to strip out.

Part 2) two instances of the button's text (See All) followed by the correct variable of btnParent for the first button and then the second button and finally one instance of "Products".

My issue is, I can't figure out how to:

Part 1) send back the stripped URL to its respective button's href as an each function.

Part 2) Have the each() function print out the new text as "See All + BLAH + Products" for each instance, and then append the new text to the respective button.

Here is the code:

 function viewMoreBtn() { var btnMain = $("li:contains('See All')"); var btnText = $("li:contains('See All')").text(); var btnParent = $("li:contains('See All')").parent('ul').prev('li').text(); // PART 1 - STRIP LINK URL OF -_-// CHARACTERS $.each(btnMain, function(i, v) { v = $(this).find('a').attr('href').replace('-_-//', ''); console.log(v); }); // PART 2 - ADD LABEL TO HTML TEXT OF BTN $.each(btnMain, function(index, value) { value = (btnText + btnParent + 'Products'); $(btnMain).text(value); console.log(value); }); } viewMoreBtn(); 

Thank you.

Answer 1

jQuery objects, as return by $(...) have a each method already on them. The element is passed as the this context. You could use that further with jQuery to act on the objects in an scoped context. Basically, you have the right code, just in the wrong scope.

Part 1

btnMain.each(function() {
    var $li = $(this);
    var $a  = $li.find('a');
    var desiredUrl = $a.attr('href').replace('-_-//', '');
    $a.attr('href', desiredUrl);
});

Part 2

btnMain.each(function() {
    var $li = $(this);
    var btnText = $li.text();
    varbtnParent = $li.parent('ul').prev('li').text();
    value = (btnText + btnParent + 'Products'); 
    console.log(value);

    $li.find('a').text(value);

});

Answer 2

See @Zequ's answer for the iteration over the each() function in the returned btnMain.

This is how $.each( obj, function( key, value ) works: you iterate over btnMain, and for each iteration of $.each(), the function assigns the index of the iteration to i and the value of btnMain at that index to v.

$.each(btnMain, function(i, v) {
    //v = $(this).find('a').attr('href').replace('-_-//', '');
    console.log(i); // I am the index of $.each() iterator
    console.log(v); // I am the node from the btnMain array
    // I don't know if this is right without seeing your HTML, but it seems like what you want
    v.find('a').attr('href').replace('-_-//', '');
});

The second $.each() follows the same pattern.

Answer 3

If I understood correctly, you're confusing your variables.

$.each is a function for each element of the array/object being passed. It gives you a index and the element, check the reference

In part 1, you're defining v as the string you want, you're not changing the element at all,you need something like this:

$.each(btnMain, function() {
    // you're saying you got the correct URLs, so the only thing you need to do is to change the element afterwards
    var element = $(this).find('a');
    v = element.attr('href').replace('-_-//', '');
    element.attr('href', v);
});`

Also you could use btnMain.each instead of $.each

In part 2, you are changing the value variable (it's actually the element you're iterating over), to the string you want, then you follow it by trying to change btnMain's text. This is wrong, from what I understood, btnMain is an array of two elements you can't change it's text. You should change the element's value (that you are calling value). It would be something like that

$.each(btnMain, function(index, element){
    // I think this is the time you want to define the btnParent, relative to the element
    var btnParent = element.parent('ul').prev('li').text();
    var value = (btnText + btnParent + 'Products');       
    element.text(value);
}

I THINK this is what you need. Also you could append both parts into one, since both are iterating over btnMain