Click on li:nth-child(n) through javascript

Question

I am trying to click on a specific link through a submit button.

Basically I have a ul with a large amount of li's with a link of class="episodeLink" in each li as you can see on http://8animetv.co.vu/onepiece .

I have added an input box in which you write a number, press Watch and via a javascript function it's supposed to click on .episodeLink:nth-child(n).

I have written the javascript like this

<script type="text/javascript">

    function openEpisode() {
    var input = document.getElementById('input');
    var allEpisode = $(".episodeLink").length + 1;
    var click = allEpisode - input.value;
    document.getElementsByClassName("episodeLink:eq('+click+')").click();
}

</script>

So when you write f.ex. 5 it will firstly grab the number 5, then count the amount of .episodeLink's there is and add 1 to that, so that you can substract the first number (5 in this example) and find which .episodeLink I have to select to get clicked. I have already tested the numbers with an alert(click); and it is the correct number every time.

I just need to know how do I call Javascript to click on .episodeLink:nth-child(click); ?

score 0 · Answer 1 · answered May 25 '15 at 19:31

0

getElementsByClassName is only used to match class names, you can't put CSS selectors like :eq in it. It returns a NodeList, which is array-like, so you can index it.

document.getElementsByClassName("episodeLink")[click].click();

answered May 25 '15 at 19:31

Barmar

741,623
53
500
612

score 0 · Accepted Answer · answered May 25 '15 at 19:34

0

$(".episodeLink").eq(click).click(); is less verbose and should work.

answered May 25 '15 at 19:34

Niloct

9,491
3
44
57

There is a problem though, when I physically click on the link it takes the href="sth" to target="ifrm", but it doesn't change it now, it only runs the javascript that happens with the .episodeLinks. How can I make the links href change the source of the #ifrm to the source of the link itself? I am pretty sure it's only one line, but I can't think of anything. – eight May 25 '15 at 19:50
Your links aren't changing the iframe src even when clicked. I think that's not the way to do that, specifying `target`. Check http://stackoverflow.com/questions/6000987/dynamically-set-iframe-src – Niloct May 25 '15 at 20:06
The src of the iframe does change. It's just that the video is black by default, but I have tried playing them and they are different! Your link gave me an idea though, document.getElementById('ifrm').src = $(this).src; which is working but the fact that $(this).src (under the $('.episodeLink').click function is changing the iframes src to undefinded. So if there is a way to call the source of the clicked link that would fix the problem. Any ideas? – eight May 25 '15 at 20:32
I fixed it! I wasn't looking for the src of the link but the href so I just used document.getElementById('ifrm').src = $(this).attr("href"); Which worked perfectly! If you try it I haven't added href's to all the links yet and that's why it may not work. Thanks for your help! – eight May 25 '15 at 20:37
One less thing to worry =) Anytime. – Niloct May 25 '15 at 20:40

score 0 · Answer 3 · answered May 25 '15 at 19:38

0

You can use :eq selector, if you are using jQuery.

JS Code :

(".episodeLink:eq("+click+")").click();

or

$(".episodeLink").eq(click).click();

Reference : https://api.jquery.com/eq-selector/

answered May 25 '15 at 19:38

Prateek

4,220
1
17
22

Click on li:nth-child(n) through javascript

3 Answers3