Question

Ok so I have this html code:

<h1 class="left" data-target="newest">Newest</h1>
............
<h1 class="left" data-target="topRated">Top Rated</h1>
....

which clicking on the h1 tag does a jquery function, now I have this html links

        <li>
            <a href="">Newest</a>
        </li>
        <li>
            <a href="">Top Rated</a>
        </li>

I need to do, somehow, that when clicking <a href="">Newest</a> in the list or <a href="">Top Rated</a>, to be like if you were clicking on the h1 tag. Is that possible?

Thank you.

Answer 1

Based on your comment, you want to be able to click on an h1, and have it really click the related anchor.

$("h1").click(function(){
    var textTarget = $(this).text();
    $("a").filter(function(i, val) { return $(val).text === textTarget; }).click();
});

Ideally though, if you could do:

<li>
    <a href="" data-target="newest">Newest</a>
</li>
<li>
    <a href="" data-target="toprated">Top Rated</a>
</li>

then the script would simply be:

$("a").click(function(){
    $("h1[data-target='" + $(this).data("target") + "'").click();
});