Question

我有一个以下列方式构建的HTML文档：

<section id="page1" data-role="page"> 
    <a href="#" id="next-section" class="next-section" style=" cursor:e-resize"><div class="arearight" alt="go right" ></div></a>
    <a href="#" id="prev-section" class="prev-section" style=" cursor:w-resize"><div class="arealeft" alt="go left" ></div></a>
...   
</section>

<!-- more sections -->

我有以下代码来遍历它

$(":jqmData(role='page')").each(function() {
    $(this).bind("swipeleft" goLeft); //goLeft and goRight are defined and working
    $(this).bind("swipeleft", goRight);
    //...
}

滑动工作正常，但我想绑定到next-section和prev-section click行为来调用goLeft和goRight，但是我不知道如何通过$(this)对象访问它们。有没有人知道怎么去找他们？

由于

Answer 1

为他们使用不同的选择器：

$(this).find("#prev-section").click(goLeft);

$(this).find("#next-section").click(goRight);

请注意，您将拥有多个具有相同ID的元素（#prep-section，＃next-section），但ID应该在整个DOM上都是唯一的。将其替换为类或数据破折号属性（例如您role=page使用的属性）。

Answer 2

$('#next-section').bind('click', goRight);
$('#prev-section').bind('click', goLeft);

或

$('a.next-section').bind('click', goRight);
$('a.prev-section').bind('click', goLeft);

或

$(this).children('#next-section').bind("swipeleft" goLeft);
$(this).children('#prev-section').bind("swipeleft", goRight);

或

$(this).find('#next-section').bind("swipeleft" goLeft);
$(this).find('#prev-section').bind("swipeleft", goRight);

jQuery通过$（this）遍历HTML

2 个答案: