从元素jQuery中获取ID字段

时间:2013-07-25 12:09:44

标签: javascript jquery jquery-mobile dom

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

这是ListView

这就是我试图实现这个目标的方式......

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);
            }
        });
    }
}

有人能指出我正确的方向,并帮助解释为什么我不能抓住身份证?在此先感谢您的帮助!

近期修改

我已尝试实现此功能,现在我知道我不需要通过.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在添加<div>链接之前添加了一些<a>元素。现在,我将不得不弄清楚如何解决这个问题。

<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>

2 个答案:

答案 0 :(得分:1)

您正试图访问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);          
});

答案 1 :(得分:1)

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

这应该工作

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