list doesn't scroll on click
Question
I have two identical lists in my html code and I want that if I select an element in one list then the other list should automatically scroll to that element in it, for that I have written the code below but this is not working, means when I click any element in list-1 nothing is going to happen in list-2. I am using chrome browser on windows 8.1. please solve the problem.
this is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#l1 li').click(function() {
var val = $(this).html();
$('#l2 li').each(function() {
$(this).css('color','black');
if($(this).html() == val) {
$(this).css('color','red');
$('#l2').animate({
scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
});
}
});
});
</script>
</head>
<body>
<ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>black</li>
<li>orange</li>
<li>purple</li>
<li>pink</li>
<li>grey</li>
<li>brown</li>
</ul>
<ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px">
<li>purple</li>
<li>pink</li>
<li>grey</li>
<li>brown</li>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>black</li>
<li>orange</li>
</ul>
</body>
</html>
4 answers
solution1
1 2015-12-18 08:49:39
I just created a jsfiddle and it works find " https://jsfiddle.net/n8403xft/ " the only thing in your code is you are missing the
$(function()
{
// Insert code here
});
solution2
1 2015-12-18 08:52:25
The problem is your are executing code before DOM is built.
You have to use $(document).ready(function(){}) , that means your code will be executed when DOM is loaded.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $('#l1 li').click(function() { var val = $(this).html(); $('#l2 li').each(function() { $(this).css('color','black'); if($(this).html() == val) { $(this).css('color','red'); $('#l2').animate({ scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() }); } }); }); }); </script> </head> <body> <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px"> <li>red</li> <li>green</li> <li>blue</li> <li>yellow</li> <li>black</li> <li>orange</li> <li>purple</li> <li>pink</li> <li>grey</li> <li>brown</li> </ul> <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px"> <li>purple</li> <li>pink</li> <li>grey</li> <li>brown</li> <li>red</li> <li>green</li> <li>blue</li> <li>yellow</li> <li>black</li> <li>orange</li> </ul> </body> </html>
solution3
1 2015-12-18 08:55:39
This is not dependent to any browser or any os, Just Replace your script tag code with this
<script>
$(document).ready(function () {
$('#l1 li').click(function () {
var val = $(this).html();
$('#l2 li').each(function () {
$(this).css('color', 'black');
if ($(this).html() == val) {
$(this).css('color', 'red');
$('#l2').animate({
scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop()
});
}
});
});
});
solution4
1 2015-12-18 08:56:29
You are binding the click event before elements are loaded. Put your js in the last of body tag like following. Hope this will help you.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <ul id="l1" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:150px"> <li>red</li> <li>green</li> <li>blue</li> <li>yellow</li> <li>black</li> <li>orange</li> <li>purple</li> <li>pink</li> <li>grey</li> <li>brown</li> </ul> <ul id="l2" style="height:100px; width:70px; overflow:hidden; overflow-y:scroll; position:absolute; top:50px; left:350px"> <li>purple</li> <li>pink</li> <li>grey</li> <li>brown</li> <li>red</li> <li>green</li> <li>blue</li> <li>yellow</li> <li>black</li> <li>orange</li> </ul> <script> $('#l1 li').click(function() { var val = $(this).html(); $('#l2 li').each(function() { $(this).css('color','black'); if($(this).html() == val) { $(this).css('color','red'); $('#l2').animate({ scrollTop: $(this).offset().top - $('#l2').offset().top + $('#l2').scrollTop() }); } }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.