0

Hi all, I have some HTML as follows and I want it so when you click on an <li> it returns the dd3-content and url.

<div class="dd" id="nestable3">
    <ol class="dd-list" id="start">
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">Home</div>
            <div class="url" style="display:none;">homeurl</div>
        </li>
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">About Us</div>
            <div class="url" style="display:none;">abouturl</div>
        </li>
        <li class="dd-item dd3-item">
            <div class="dd-handle dd3-handle"></div>
            <div class="dd3-content">Gallery</div>
            <div class="url" style="display:none;">galleryurl</div>
            <ol class="dd-list">
                <li class="dd-item dd3-item">
                    <div class="dd-handle dd3-handle"></div>
                    <div class="dd3-content">Contact</div>
                    <div class="url" style="display:none;">contacturl</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

My problem is if it more than one level deep. It is returning the li above it as well

I just need the level clicked. Also I'm looking to write a delete option to delete the <li> clicked and the immediate ones below it. I can, if needed give each <li> a unique id. How can I achieve this.

http://jsfiddle.net/R89Xk/1/

Edited by iamthwee

3
Contributors
8
Replies
40
Views
3 Years
Discussion Span
Last Post by iamthwee
2

Use: http://api.jquery.com/event.stoppropagation/

It stops the event from "bubbling up".

Perfect solution, but don't forget to pass "event" as the function's parameter. Won't work (in some browsers) otherwise.

$(".dd-item").click(function(event){
    alert($(this).find('.dd3-content').html());
    alert($(this).find('.url').html());
    event.stopPropagation();
});

Edited by DJBirdi

0

Thanks guys that's just great. Now I need a way to click on a <li> item and change the dd3-content field and url field. I have decided to give each li item a unique id.

So how may I do this? And I need a way to delete a selected node.

0

I just realised the replace html isn't working properly I needed to add:

$(this).find('.dd3-content').eq(0).html('Hello');

To limit it to the li clicked.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.