javascript - jQuery通过$(this)遍历HTML

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-sectionandprev-section一个click调用goLeftand的行为goRight，但我不知道如何通过$(this)对象访问它们。有人知道如何找到他们吗？

谢谢

Answer 1

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

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

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

请注意，您将拥有多个具有相同 ID（#prev-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);