在 div 中选择 <ol> 的第 n 个子元素答案

【问题标题】：Selecting n-th child of an <ol> within a div在 div 中选择 <ol> 的第 n 个子元素
【发布时间】：2014-03-30 02:50:20
【问题描述】：

我正在尝试制作一个图像滑块，它可以根据在 <ol> 中选择 <li> 来滑动图像。如果单击第二个项目符号，则 -> 更改背景颜色 -> 滑动到图像 2。

这是我尝试过的：

            $(document).ready(function() {

        gallery_image_slider();
        slider();
    });

    function slider() {

        $('project_selector>ol>li:nth-child(1)').click(function() { 

            $('project_selector>ol>li:nth-child(1)').css('background' : 'black');

    }  );


<div class="projects">
            <h1>Current Projects</h1>

        <div class="current_projects" align="center">

            <div class="projects_gallery" align="center">

                <table align="center">
                     <tr>
                        <th>
                            <div class="project_desc_1">
                            Project Description 1
                            </div>

                            <div class="project_desc_2">
                            Project Description 2
                            </div>
                        </th>
                    </tr>

                     <tr>
                        <th>
                            <div class="slide"><img src="./images/blivori.png"/ id="project1"></div>
                            <div class="slide"><img src="./images/blivori.png"/ id="project2"></div>
                        </th>
                    </tr>

                     <tr>
                        <th>
                            <ol class='project_selector'>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ol>
                        </th>
                    </tr>           

                     <tr>
                        <th>
                            <label id="description1">Description 1</label>
                            <label id="description2">Description 2</label>
                        </th>
                    </tr>   
                </table>

            </div>
            </div>

        </div>

我该怎么做？

【问题讨论】：

标签： jquery click html-lists css-selectors

【解决方案1】：

根据你的代码和你的问题，我很困惑，但如果你试图让你的代码工作

function slider() {

    $('.project_selector li').click(function() { 

        $(this).css({'background' : 'black'});

   });
}

【讨论】：

【解决方案2】：

首先，当使用 jQuery 选择一个类时，您需要在其名称前加上句点 (.)，如下所示：

$('.project_selector')

其次，我可以看到您的<ol> 列表中没有<ol> 标记。我不确定您想通过li:nth-child(1) 获得什么，但如果您的意图是选择第一个<li>，那么您将使用.eq() 方法并将其第一个参数指定为@987654328 的索引你感兴趣的@，从零开始。

function slider() {
   $(document).on('click', '.project_selector > li:eq(0)', function() {
        $(this).css('background-color', 'black');
   });
}

【讨论】：