jquery - 如何使用 jquery 选择具有类属性的列表元素内的链接内的图像？

Question

我有以下问题:我得到了一个动态生成的缩略图列表，我无法在其中为图像提供类或 ID 属性。该列表如下所示:

<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>

如您所见，有一个列表元素类属性“active”。我给了它另一种风格。但我希望上一张和下一张图片也有不同的风格。现在的问题是:如何选择它们？

我进行了一些试验，能够选择上一个和下一个列表元素并可以更改它们的样式。它的代码是:

<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>

这适用于列表元素。但我需要选择图像。不幸的是“li.active img”没有工作，不幸的是我无法更改 php 代码以便图像具有类名。那么有没有办法选择那两个图像并使用 jquery 更改它们的样式？

问候

Answer 1

您可以使用以下任何一种

简单地给图片添加类

   $(document).ready(function () {
        $('li.active').prev().find('img').addClass('previmg');
        $('li.active').next().find('img').addClass('nextimg');
   });

通过这种方式，您可以使用新的图像类来识别 jquery 点击

或者试试这个

   $(document).ready(function () {
        $('li.active').prev().find('img').css({
                                    background-color: 'red', 
                                    height : '300px'
        });
        $('li.active').next().find('img').css({
                                    background-color: 'red', 
                                    height : '300px'
        });
   });

或者你可以使用很长的路

   $(document).ready(function () {
        $('li.active').prev().children('a').children('img').css({
                                          background-color: 'red', 
                                          height : '300px'
        });
        $('li.active').next().children('a').children('img').css({
                                          background-color: 'red', 
                                          height : '300px'
        });
   });