CODEWITHSUNDEEP
jquery
user796443
user796443

Reputation:

how to target parent element only?

I've following markup:

<ul>
    <li>
        <a href="#"><img src="sample-big-product.png" alt="" title="" /></a>
        <span><a href="#">View Product</a></span>
        <ul><li>1,2,3</li></ul>
            <h2>Featured product name</h2>
        <p>Lorem ipsum dolor sit amet, cosetur adispci elit. Morbi poseure ante porta justo...</p>
    </li>

    <li>
        <a href="#"><img src="sample-big-product.png" alt="" title="" /></a>
        <span><a href="#">View Product</a></span>
            <ul><li>1,2,3</li></ul>
        <h2>Featured product name</h2>
        <p>Lorem ipsum dolor sit amet, cosetur adispci elit. Morbi poseure ante porta justo...</p>
    </li>
    <li>
        <a href="#"><img src="sample-big-product.png" alt="" title="" /></a>
        <span><a href="#">View Product</a></span>

        <h2>Featured product name</h2>
        <p>Lorem ipsum dolor sit amet, cosetur adispci elit. Morbi poseure ante porta justo...</p>
    </li>
    <li>
        <a href="#"><img src="sample-big-product.png" alt="" title="" /></a>
        <span><a href="#">View Product</a></span>

        <h2>Featured product name</h2>
        <p>Lorem ipsum dolor sit amet, cosetur adispci elit. Morbi poseure ante porta justo...</p>
    </li>
</ul>

Here is my jquery, so here I target all LI and all UL. But I only want to target ul li and not ul li ul li

// get all available UL and LI elements...
var li_elements = container.find("LI").clone();

// remove the current content so that we can rebuild it for the slider...
container.find("UL").remove();

p.s. obviously I can simply add .class to them. But I'd rather not complicate markup...

Upvotes: 1

Views: 372

Answers (4)

dreamweiver
dreamweiver

Reputation: 6002

If you wanted only the first occurrence of ul li and skip the rest then use first().

For example:

var li_elements = container.find("LI").first()  // which gives you first li

For more info, see: http://api.jquery.com/first/

Upvotes: 0

Jai
Jai

Reputation: 74738

I don't know what you want to achieve but as is understood i created a fiddle :

http://jsfiddle.net/AFM2P/

in this fiddle i have created a hover event and removed the direct children of the hovered ul

(i guess you want to achieve something like this)

This is what i have tried:

$('ul:first').hover(function(){
    $('ul',this).remove(); //<---------This will remove the child ul 
});                        //           of the hovered ul

Upvotes: 0

dualed
dualed

Reputation: 10502

If you want to select only direct descendants of ul, use the .children method (assuming container is the ul element)

container.children("li");

If you want to select only unordered lists that contain other unordered lists, you can use the :has() selector (assuming container is an ancestor of ul)

container.find("ul:has(ul)");

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Use the > 'direct child of' selector. Assuming container is a jQuery object referencing a parent element of the top-level ul, this should work:

var li_elements = container.find("> ul > li").clone();
container.find("> ul").remove();

Upvotes: 2

Related Questions