Question

我的HTML结构是这样的：

    <div class="product-slider-title">
        <div><span class="left">&nbsp;</span></div>
        <div>Sample title</div>
        <div><span class="right">&nbsp;</span></div>
    </div>
    <div id="prslider1" class="product-slider-wrapper">
        <div class="left-prduct-slider-nav sprites"></div>
        <div class="right-prduct-slider-nav sprites"></div>    
        <div class="product-slider">
            <ul>
                <li class="product-holder"></li>
            </ul>
        </div>
     </div>

当我点击.product-slider ul时，如何找到距离.left-prduct-slider-nav最近的.left-prduct-slider-nav？

Answer 1

如果this是.left-prduct-slider-nav，那么

var ul = $(this).siblings('.product-slider').find('ul')

演示：Fiddle

Answer 2

您可以使用nextAll()在当前元素之后搜索兄弟姐妹，并使用find()搜索nextAll返回的匹配元素中的子元素。

<强> Live Demo

$(this).nextAll('.product-slider').find('ul');

Answer 3

这应该有效

var ul = $('.left-prduct-slider-nav').closest('ul');

Answer 4

嗯试试这个：

$('.left-prduct-slider-nav').click(function () {
    var closest_ul = $(this).parent().find('.product-holder ul');
});

Answer 5

尝试first-child：

<强> HTML：

<div class="product-slider-title">
    <div><span class="left">&nbsp;</span>

    </div>
    <div>Sample title</div>
    <div><span class="right">&nbsp;</span>

    </div>
</div>
<div id="prslider1" class="product-slider-wrapper">
    <div class="left-prduct-slider-nav sprites">Left Slider Nav</div>
    <div class="right-prduct-slider-nav sprites"></div>
    <div class="product-slider">
        <ul>
            <li class="product-holder1"></li>
        </ul>
        <ul>
            <li class="product-holder"></li>
        </ul>
        <ul>
            <li class="product-holder"></li>
        </ul>
        <ul>
            <li class="product-holder"></li>
        </ul>
    </div>
</div>
<div class="product-slider-title">
    <div><span class="left">&nbsp;</span>

    </div>
    <div>Sample title</div>
    <div><span class="right">&nbsp;</span>

    </div>
</div>
<div id="prslider1" class="product-slider-wrapper">
    <div class="left-prduct-slider-nav sprites"></div>
    <div class="right-prduct-slider-nav sprites"></div>
    <div class="product-slider">
        <ul>
            <li class="product-holder"></li>
        </ul>
    </div>
</div>

<强> JS：

$(document).ready(function () {
    $(".left-prduct-slider-nav").click(function () {
        alert($(".product-slider").find("ul:first-child").find("li").prop("class"));
    });
});

jsFiddle.

说明：

我处理.click()的{{1}}函数，然后我提醒最近的.left-prduct-slider-nav，或者换句话说第一个class的li。

证明：

证据是我更改了第一个ul:first-child的{{1}}的{{1}}，然后更改了class，然后我得到的输出是：{{1 }}

Answer 6

距离.product-slider ul最近的.left-prduct-slider-nav只是列表中的第一个，因此您可以使用:first：

$('.left-prduct-slider-nav').click(function() {

    $(this).parent().find('.product-slider ul:first')

})

Answer 7

试试这个：

$(this).next().next().find('ul');

jQuery找到最接近的ul

7 个答案:

jsFiddle.

说明：

证明：