Mixing
jquery trigger multiple click event using for loop and random eq
jquery trigger multiple click event using for loop and random eq
I need a click event on multiple random elements. I used this below code but not working. It just triggering one time only.
$('.dbl_rand_txt>li').on('click', function(e) {
var dbl_rand_no = $(this).children('span').children('a').text();
var random = Math.floor(Math.random()*100);
for (var i = 1; i <= dbl_rand_no; i++) {
$(".tab-content li").eq(random).click();
}
});
.dbl_rand_txt>li
also do you have approx
100 <li> inside the .tab-content– Muhammad Omer Aslam
2 days ago
100
<li>
.tab-content
Yes @MuhammadOmerAslam
– Gummidi Bhaskararao
2 days ago
added an answer see if it helps
– Muhammad Omer Aslam
2 days ago
4 Answers
4
Try to run the following code snippet and observe the result.
$('.dbl_rand_txt > li').on('click', function(e) {
var dbl_rand_no = $(this).children('span').children('a').text();
var random = Math.floor(Math.random()*10);
for (var i = 1; i <= dbl_rand_no; i++) {
$(".tab-content li").eq(random).click();
}
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<ul class="dbl_rand_txt">
<li><span><a>10</a></span></li>
<li><span><a>5</a></span></li>
<li><span><a>2</a></span></li>
</ul>
<ul class="tab-content">
<li onclick="console.log('clicked 0');"></li>
<li onclick="console.log('clicked 1');"></li>
<li onclick="console.log('clicked 2');"></li>
<li onclick="console.log('clicked 3');"></li>
<li onclick="console.log('clicked 4');"></li>
<li onclick="console.log('clicked 5');"></li>
<li onclick="console.log('clicked 6');"></li>
<li onclick="console.log('clicked 7');"></li>
<li onclick="console.log('clicked 8');"></li>
<li onclick="console.log('clicked 9');"></li>
</ul>
its just an example based on your question. see if it works for you.
You also need to convert string returned via dbl_rand_no to Number
string
dbl_rand_no
Number
Since random is calculated once, $(".tab-content li").eq(random) will always return you same element. Move random calculation inside the for loop if you want to target different element.
random
$(".tab-content li").eq(random)
random
for
$('.dbl_rand_txt>li').on('click', function (e) {
//Convert string to number
var dbl_rand_no = parseInt($(this).children('span').children('a').text(), 10);
for (var i = 1; i <= dbl_rand_no; i++) {
//Calculate random for different element
var random = Math.floor(Math.random() * 100);
$(".tab-content li").eq(random).click();
}
});
Stiil not working. triggers only one time
– Gummidi Bhaskararao
2 days ago
Can ypu please upload it in js fiddle
– Gummidi Bhaskararao
2 days ago
@GummidiBhaskararao, Sure create one and I will update for you
– Satpal
2 days ago
Okay. Thank you
– Gummidi Bhaskararao
2 days ago
@GummidiBhaskararao have you tried $(selector).eq(random).trigger('click')?
– mtizziani
2 days ago
Try this.
var dbl_rand_no = Number($(this).children('span').children('a').text());
Also put your random function inside foor loop.
Move you random number generation inside the loop so that as many time the loop has to go it should generate a new random number every time, and use .trigger('click') to trigger the function rather than .click() although it is the short hand for trigger('click') as calling .click() without the params will call the click event, it will call one less function and .trigger("click") is faster see Here
.trigger('click')
.click()
trigger('click')
.click()
.trigger("click")
See a demo below
$('.dbl_rand_txt>li').on('click', function(e) {
var dbl_rand_no = parseInt($(this).children('span').children('a').text());
for (var i = 1; i <= dbl_rand_no; i++) {
var random = Math.floor(Math.random() * 5);
$(".tab-content li").eq(random).trigger('click');
}
});
$(".tab-content li").on("click", function() {
console.log("Clicked <li> with text", $(this).text());
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<ul class="dbl_rand_txt">
<li><span><a href="#.">1</a></span></li>
<li><span><a href="#.">2</a></span></li>
<li><span><a href="#.">3</a></span></li>
<li><span><a href="#.">4</a></span></li>
<li><span><a href="#.">5</a></span></li>
</ul>
<ul class="tab-content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
are you trying to trigger the click event if clicked on the
.dbl_rand_txt>li?– Muhammad Omer Aslam
2 days ago