从元素 jQuery 每个中获取 ID 字段

Posted 2023-05-09

【中文标题】从元素 jQuery 每个中获取 ID 字段

【英文标题】：Grabbing ID Field from Element jQuery Each

【发布时间】：2013-07-25 07:46:02

【问题描述】：

我正在尝试循环遍历 <ul> 列表中的所有子项，分配一个 onclick 事件侦听器并使用该事件的元素 ID。我在我的应用程序中使用 jQuery 和 jQueryMobile。出于某种原因，元素的 ID 属性总是显示为空白？当我提醒实际元素时，我得到[ObjecthtmlLIElement]。当我使用 DevTools 时，ID 字段出现在所有元素中？

这是列表视图

这就是我尝试实现的方式...

function set_onclicks()

    var count = $('#main-listview').children().length;
    if (count > 0)
    
        $('#main-listview').children().each(function() 
            this.onclick = function() 
                project_id = this.id;
                $.mobile.changePage('#main-project-page', 'slide', true, true);
            
        );
    

谁能指出我正确的方向并帮助解释为什么我无法获取 ID？提前感谢您的帮助！

内森

近期编辑

我已经尝试过实现这一点，现在我知道我不需要通过.each() 循环进行绑定。

$('#main-listview').children().click(function() 
    alert(this);
    alert(this.id);
    project_id = this.id;
    $.mobile.changePage('#main-project-page', 'slide', true, true);
);

第一个警报给我[ object HTTMLLIElement ] 下一个警报给我一个空白...？

编辑 2 - HTML 示例 我想我现在知道为什么了。 jQueryMobile 在添加<a> 链接之前添加了一些<div> 元素。现在，我将不得不弄清楚如何解决这个问题..

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-theme="a" id="main-listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a id="51e0278f2a1cb33a08000002" class="ui-link-inherit">123456 - The Project</a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
        </div>
    </li>
</ul>

【问题讨论】：

$(this).attr('id') 实际上:)

@Vogel612 - 我收到Uncaught TypeError: Object #<HTMLLIElement> has no method 'attr' main.js:407 onclick

我认为在你的情况下 this 指的是全局对象，而不是当前元素

你能展示一个你的html示例吗？我认为 bipen 的回答应该适用于您所描述的内容，但也许还有一些您尚未提及的内容......

这个？ jsfiddle.net/Palestinian/ACH9B - 已更新。

【参考方案1】：

我不知道你为什么要使用函数来设置点击事件..（并且不需要使用循环$.each 来设置每个元素的点击事件）。

这应该可以工作

  $('#main-listview').children().click(function() 
             project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        
    );

【讨论】：

我不知道我可以通过children().click() 为所有孩子设置事件处理程序。我还在学习 javascript 和 jQuery 的东西。

不。我尝试向this 添加警报和this.id 的警报 - 我得到[ object HTMLLIElement ] 然后下一个警报完全空白？

这是因为 jQueryMobile 将 <a> 与许多其他我不知道从哪里加载的孩子一起包装。感谢您对我的问题的持续帮助:)

【参考方案2】：

您试图在 javascript 事件处理程序中访问 this，除非您通过 jQuery 对象绑定它，否则您无法访问它

改变

this.onclick = function() 
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
        

到

$(this).click( function() 
            project_id = this.id;
            $.mobile.changePage('#main-project-page', 'slide', true, true);
);

简单的解决方案您不必在绑定之前检查选择器是否返回了元素，这要归功于 jquery，让生活变得轻松，您不需要为绑定事件使用每个元素。

$('#main-listview').click(function()            
   project_id = this.id;
   $.mobile.changePage('#main-project-page', 'slide', true, true);          
);

【讨论】：

#main-listview 是 <ul> 容器，而不是被点击的实际元素...当我 alert(this.id); 时仍然返回空白