Question

我有以下问题：我有一个动态生成的缩略图列表，我不能给图像既不是类也不是id-attribut。该列表如下所示：

<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

添加.find（img），它会在li.active中找到img，例如：

$('li.active').find(img).whatever...

Answer 2

您可以使用jQuery的.addClass();函数将类添加到上一个和下一个li，然后使用CSS为其中的图像设置样式。

请参阅http://jsfiddle.net/TFQ3K/3/

Answer 3

您可以使用以下任何一种

只需将Class添加到图像

即可

   $(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'
        });
   });

如何使用带有jquery的class属性在list-element内部的链接中选择一个图像？

3 个答案: