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

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.

Answers 1

  • 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


Related Articles