[JS] Get links from DIVs with same name

[serph09]

It's a bit confusing to explain so I'll give an example instead and try my best.

So let's say I have multiple blocks of DIV element with same class name (can't change class name for each DIV), but within each of those DIV, the content is different (specifically the a href value).
What I want to accomplish is that when I click on a button (there is a button below each of the DIV) the button gets the specific a href value of that DIV block only.
Image below might help better illustrate what I'm saying:P
(Ignore the add to cart button)

http://i46.tinypic.com/ojte8.png

Problem is when I click on the button on the right, it reports the link (href) of the DIV block on the left.
How do I make it so each time I click on a button of a specific DIV block, it gets the link within that DIV only?

Any help would be greatly appreciated. Thanks.

[pixelsoul]

Do you have any code/markup for this? The best way for us to get an idea of what you are talking about is showing that. If you have the actual page up online that we can see that would be helpful as well.

[serph09]

Here's the code for it:

http://i47.tinypic.com/24oy135.png

"item-box" is the DIV block (there's two in this case).

[pixelsoul]

So yeah, instead of taking a screenshot of your code, can you just put it on the forum? What if I or someone else wants to change it around and show you a way to make it work? Then we have to type it all out again.

And do you already have some Javascript/jQuery that you had done to try and do this?

[serph09]

Ya, I tried to copy the html code but it's not so organized so I just screenshot it instead.
But the html is unchanged.
The JS I wrote for testing:

function locatehref() {
        var mylink = $(".product-title").find("a").attr("href");
        //var mylink = document.getElementsByTagName("a"); //gets all links though
        //for (var i = 0; i < mylink.length; i++) {
        //    if (mylink[i] == "http://localhost:1424/test-prod") {
        //        alert(mylink[i]);
        //    }
        //}
        alert(mylink); //this reports only one link, the first one it finds regardless of what  button is clickek
    }

[pixelsoul]

The problem with using find() here is that it is looking down the markup first at the descendents, not up the markup first. What you are trying to do is get the immediate preceeding div and then the href inside. Something sort of like this:

function locatehref() {
        var mylink = $(this).prev('.product-title').children('a').attr('href');
        alert(mylink);
}

[serph09]

That reports undefined instead.
There are two hrefs in each DIV block but both hrefs are same link so just one would be fine.
I"m still trying to figure how each button will report specific link.
Thanks a lot for the help so far:)

[pixelsoul]

That is the reason I really wanted the html here. It's not working because the href is not a direct decendent of the div, it is inside of another div that is in that div. Try this and see if it works.

function locatehref() {
        var mylink = $(this).prev('.product-title').siblings().children('a').attr('href');
        alert(mylink);
}

[pixelsoul]

Oops, that code above is wrong. Try this below.

function locatehref() {
        var mylink = $(this).prev('.product-item').children('.product-title').children('a').attr('href');
        alert(mylink);
}

[serph09]

That still reports undefined.
Here's the html in text: http://jsfiddle.net/YMftM/
That contains 2 div blocks.

There is also the same href under the class "picture." Either one is fine (since both are the same anyway), I just need to extract the specific link from each DIV.

[pixelsoul]

I for the life of me could not get this to work the way you have it setup with the call to the function inline with the onclick. Maybe I am tired and just not seeing why, or maybe it is because I never use an inline onclick event for anything anymore. I imagine if you have enough flexability to add an onclick event to the button then you can surely add a class to the button, right?

So, I made it work here using a class on the button. I just did it the way I am used to and I was able to get it to work this way. I like it better this way too as I feel it is a cleaner approach.

http://jsfiddle.net/pixelsoul/EnNsG/

I hope this works for you, and sorry if it doesn't.

[serph09]

Thanks. This works on the jsfiddle site but unfortunately, not on the framework that I'm using (nopcommerce). It still reports undefined and actually has multiple alerts instead of just one per button click.

I also wrote this function for testing:

function locatehref() {
$(".product-title").each(function () {
            var link = $(this).find("a").attr("href");
            alert(link);
        });
        }

But this reports all links as well:/

[serph09]

I also tried to rearrange (I know I mentioned the html is unchanged but it seems I have to modify that now) the button location to be like this:

<h2 class="product-title">
<a href="/ap">AP</a>
<input class="findhref" type="submit" value="Button 2">
</h2>

Would this make it easier to extract the link now? (Using parent(), closest(), etc. for example?)

[pixelsoul]

I'm not sure why the code in the jsFiddle would not work, unless the html in the jsFiddle isn't exactly the way it is on the page.

[serph09]

So if I were to move my button like the one shown on my previous post, how would the link extraction look like?
I tried:

$(".findhref").parent(".product-title").find("a").attr("href");

that works, but it reports only the first link it finds (regardless of which button is clicked)

but this doesn't work:

$(this).parent(".product-title").find("a").attr("href");

[pixelsoul]

The reason why the second one won't work is because '.product-title' is not a parent to the button. You have to climb up the tree (.add-info) and then jump to the next element (.product-title). The first one is just saying grab anything with '.findhref' on it and then find an element with '.product-title' on it. I have no clue how that is actually working or getting a link.

The example in the jsFiddle goes out to the '.add-info' then gets a sibling of that div with the class '.product-title' and then drills down into that for the link. Very simple and clean, it should work as long as the structure of the html stays the same.

So what needs to be figured out now is what is different between your actual html and the html in the jsFiddle? There must be something different that is throwing it off.

[serph09]

I ended up using this:

$(this).parent(".product-title").find("a").attr("href");

But instead of "this" I replaced it with the function parameter and used "this" as a parameter when calling onclick instead. It works:)

Thanks pixelsoul; you've been a great help;)