无法在jQuery中获取父元素的索引

Question

<ul class="urls">
    <li class="url">0
        <ul class="url_qry_str">
            <ul>1</ul>
            <ul>2</ul>
            <ul>3</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
    <li class="url">1
        <ul class="url_qry_str">
            <ul>1</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
    <li class="url">2
        <ul class="url_qry_str">
            <ul>1</ul>
            <ul>2</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
</ul>

function url_qry_add(e) {
    e.preventDefault();
    alert($(this).closest(".url").index());
});

我一直在努力获得li.url位置的索引。我究竟做错了什么？ http://jsfiddle.net/defaye/4a52gsj4/

Answer 1

这个jsfiddle示例有效。我认为它失败了，因为this实际上是Window类，而不是按钮元素。

http://jsfiddle.net/wy9g8cdp/

function url_qry_add(e) {
    e.preventDefault();
    alert($(e.target).closest(".url").index());
};

<ul class="urls">
    <li class="url">0
        <ul class="url_qry_str">
            <ul>1</ul>
            <ul>2</ul>
            <ul>3</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
    <li class="url">1
        <ul class="url_qry_str">
            <ul>1</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
    <li class="url">2
        <ul class="url_qry_str">
            <ul>1</ul>
            <ul>2</ul>
        </ul>
        <ul class="url_qry">
            <li>
                <button onclick="url_qry_add(event);">Add</button>
            </li>
        </ul>
    </li>
</ul>