Question

假设我们有一个名为'slide_down_div'的div包含两个ul（列表）。我想做出以下选择：

$('#slide_down_div ul:eq(0)');和第二个..
$('#slide_down_div ul:eq(1)');我想要你的帮助

现在，在第二个声明中，我还想选择第一个和第五个li（列表项），以便为它们应用一些样式......有办法吗？请建议。

此外，请告诉我是否可以将上述两个jquery语句合并为一个。

<ul>
    <li><img src='images/WindowsLogo.png'/>Windows</li>
    <li><img src='images/OfficeLogo.png'/>Office</li>
    <li><img src='images/OfficeLogo.png'/>Xbox</li>
    <li><img src='images/PhoneLogo.png'/>Windows Phone</li> 
    <li><img src='images/IELogo.png'/>Internet Explorer</li>
    <li><img src='images/logo_skype.png'/>Skype</li>
</ul>   

<ul>
    <li>For Home</li>
    <li>Security Essentials</li>
    <li>Microsoft Update</li>
    <li>PC Hardware</li>
    <li>PC Gaming</li>
    <li>For Work</li>
    <li>Small &amp; Medium Businesses</li>
    <li>IT Specialist Locator</li>
    <li>Enterprise</li>
    <li>Server &amp; Tools</li>
</ul>

Answer 1

var $first = $('#slide_down_div ul:first'); 
var $second = $('#slide_down_div ul:eq(1)');
$second.find('li:eq(0), li:eq(4)').foo()

var $both = $('#slide_down_div').find('ul:first, ul:eq(1)')

DEMO

:lt()选择器：

var $both = $('#slide_down_div ul:lt(2)')

DEMO

Answer 2

您想为每个<li/>的第一个和最后一个<ul/>添加CSS类吗？

<div id="slide_down_div">
    <ul class="test">
        ...
    </ul>
    <ul class="test">
        ...
    </ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#slide_down_div').find('ul.test').each(function () {
            $(this).find('li:eq(0), li:eq(4)').addClass('TestClass');
            //Or
            $(this).find('li:first, li:last').addClass('TestClass');
        });
    });
</script>

Answer 3

获取第一个li中的两个ul元素：

var first = $("#slide_down_div ul:eq(0) li:lt(2)");

获取第二个li中的第一个和第五个ul元素：

var second = $("li:eq(0), li:eq(4)", "#slide_down_div ul:eq(1)");

将两者连接到一个选择器

var both = first.add(second);

FIDDLE

请告诉我是否可以使用单个jquery语句选择下面提到的元素

3 个答案: