jQuery找到最接近的ul

Question

My HTML structure is like this:

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

How can i find the closest .product-slider ul from .left-prduct-slider-nav when i click on .left-prduct-slider-nav ?

Answer 1

if this is .left-prduct-slider-nav then

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

Demo: Fiddle

Answer 2

You can use nextAll() to search the siblings after current element and use find() to searched the children in the matched element returned by nextAll .

Live Demo

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

Answer 3

这应该工作

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

Answer 4

Hmm try this:

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

Answer 5

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

Explanation:

I handle the .click() function of .left-prduct-slider-nav then I alert the class of the closest or in other words the first ul:first-child 's li.

Proof:

The proof is that I changed the class of the first ul 's li and then alert() it and then the output I get is this: product-holder1 .

Answer 6

The closest .product-slider ul from .left-prduct-slider-nav is just the first one in the list, so you can use :first :

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

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

})

Answer 7

尝试这个：

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