Monday, 9 September 2013

How to select an image inside a link inside of a list-element with a class attribute with jquery?

How to select an image inside a link inside of a list-element with a class
attribute with jquery?

I have following problem: I got a dynamically generated list of thumbnails
where i can't give the images neither a class nor an id-attribut. The list
looks like this:
<div id="list">
<ul id="clips">
<li class="inactive"><a href=""><img
src="http://farm4.staticflickr.com/3731/buddyicons/30470506@N05.jpg?1377890675#30470506@N05"/></a></li>
<li class="inactive"><a href=""><img
src="http://farm8.staticflickr.com/7406/9704752996_361b1f64a7_s.jpg"/></a></li>
<li class="inactive"><a href=""><img
src="http://farm6.staticflickr.com/5545/9703755774_818c649c7c_s.jpg"/></a></li>
<li class="active"><a href=""><img
src="http://farm3.staticflickr.com/2892/buddyicons/98149247@N02.jpg?1377034353#98149247@N02"/></a></li>
</ul>
</div>
As you can see has one list element the class attribute "active". i gave
this one another style than the others. But i want the previous and the
next picture to have different styles as well. Now is the question: How to
select them?
I was experimenting a bit and was able to select the previous and the next
list element and could change their styles. The Code for it was:
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li.active').prev().css('background-color', 'red');
$('li.active').prev().css('height', '300px');
$('li.active').next().css('background-color', 'red');
$('li.active').next().css('height', '300px');
});
</script>
That worked for the list elements. But i need to select the images.
Unfortunately "li.active img" didnt work and unfortunately i am not able
to change the php-code so that the images will have a class name. So is
there a way to select that two images and change their styles with jquery?
Regards

No comments:

Post a Comment