javascript - How to find only one class in a html that is exactly the same and have two classes with the same name when clicked with a mouse? -
i have 2 same html code html code one:
<body> <div class="1">1</div> <div>2</div> <div class="3">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div class="1">1</div> <div>2</div> <div class="3">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </body>
as u can see html code same. need when click on div class of 1 make background of closest div class of 3 , not classes 3. example when click on first div of class 1 make first div class 3 red background.
i tried few things using jquery, none of them worked me. here current jquery code:
$(document).ready(function() { $(".1").click(function() { $(this).parent().closest(".3").css("background", "red"); }); });
thank you!
here working example using structure have. remove .parent()
, replace .nextall('.3:first')
. nextall hunt through siblings of clicked div finding first 1 one matches our selector .3:first
. .3
being class , :first
being pseudo selector first matched result.
$(document).ready(function() { $(".1").click(function() { $(this).nextall(".3:first").css("background", "red"); }); });
working jsfiddle
Comments
Post a Comment