如何使用 JQuery 从点击事件中找到最外层元素的 ID？

Posted 2023-05-08

【中文标题】如何使用 JQuery 从点击事件中找到最外层元素的 ID？

【英文标题】：How to find the ID of the most outer element from click event using JQuery?

【发布时间】：2013-01-02 09:17:39

【问题描述】：

我正在尝试从单选按钮单击事件中获取列表项的 ID。我尝试了很多符号，但似乎卡在了这个障碍上。任何帮助，将不胜感激。

html：

<li class="option" id="100400" title=""> <!-- I NEED THE ID OF THIS LIST ITEM -->
    <h5 class="ui-widget-header">Option 1</h5>
    <font id="" class="repairDetails"  style=""></font>
    <font style=""></font><br />
    <label class="price">£49.99</label>
    <a class="ui-icon ui-icon-wrench dialog_but" title="View Product Detail" href="#" style="">View Product Detail</a>
    <div id="op1Dialog" class="dialog_content" title="" style="">
        <div class="products">
            <h1 class="ui-widget-header">Avaliable Bundle Options</h1>
            <font>You can customise this option below</font>
            <div class="pOptions">
                <h2 class="customOHeader"><a href="#">Handle</a></h2>
                <div>
                    <ul>
                        <button ID="Button1" class="handle-pre">
                            Add Handle Preferance
                        </button>
                    </ul>
                </div>

                <h2><a href="#">Blade Fittings</a></h2>
                <div>
                    <ul>
                        <li for="Radio1">
                            Clear Extratec Scuff Sheet
                            <input type="radio" id="Radio1" name="" value="" class="bladeCO"/> <!-- CLICK EVENT HAPPENS HERE -->
                        </li><br />
                    </ul>
                </div>
            </div> 
        </div>
    </div>  
</li>

jQuery:

$('.bladeCO').click(function()
    var option = $(this).closest('.option').attr('id');
);

非常感谢。

【问题讨论】：

font 标签？真的！！不过似乎对我有用-> FIDDLE

所以你有一个单选按钮.. 它像复选框或其他东西一样工作吗？

使用li.option 可能会更好，以确保您获得 li 元素，而不是其他可能具有相同类的东西。

我不明白什么是行不通的。它在这里工作正常FIDDLE

你记得把它包装在$(document).ready(function() ... );

【参考方案1】：

我正在更改我的答案，以反映 adeneo 将此代码包装在文档就绪函数中的想法。

$(function()
    $('.bladeCO').click(function()
        var option = $(this).closest('li.option').attr('id');
    );
);

【讨论】：

感谢您的回复。我也试过这个。但变量返回为“未定义”？？

您的设置肯定有其他问题，因为它对我有用。 FIDDLE

【参考方案2】：

试试这个：

$(document).ready(function() 
    $('.bladeCO').click(function()
        var option = $($(this).parents("li.option")[0]).attr('id');

        console.log(option);
    );
);

问题可能是由于您的代码的其余部分未在此处显示。附近可能有另一个li 元素而不是parent。像这样：

                    <ul>
                        <li for="Radio1">Clear Extratec Scuff Sheet
                        <input type="radio" id="Radio1" name="" value="" class="bladeCO"/> CLICK EVENT HAPPENS HERE</li><br />
                    </ul>
                </div>
            </div> 
        </div>
    </div>    
</li>
<li class="option" id="some_other_id" title="">
    <h5 class="ui-widget-header">Option 1</h5>

另外，如果它在 jsFiddle 中运行而不是在您的代码中，它可能是 jquery 准备好了...

更新

这个 jsFiddle 工作正常，似乎是 jquery-ui 的问题：http://jsfiddle.net/ck4b2/336/。

【讨论】：

您确实意识到您可以只使用first()、eq(0) 或其他一些函数，而不是使用 jQuery 重新包装。

问题不是 HTML，因为上面的小提琴证明符号返回正确的 id。我认为这可能是别的东西......

@uacyber 你能试试这个吗？

很抱歉回复晚了。我不知道为什么 jquery-ui : 导致代码失败。但是当我使用 JQ-UI 时，一切正常。必须想办法让他们愉快地一起工作，因为我在这个项目中需要他们两个。再次感谢您的回复。