用 jQuery 遍历 HTML

Question

我正在尝试使用 jQuery 遍历 html。

您可以在图像中看到 html 代码。当我将鼠标悬停在星星上时，代码被触发

代码使用 parent().parent() 找到向上两层的跨度。然后使用 jquery "find" 方法获取所有 fa-star 元素。当我循环代码时，我希望循环打印 5 个项目。但它打印了大约 24 个。

造成这种行为的原因是什么？

这是我使用的 javascript 代码，

$(".fa-star").bind("mouseover", function(e){
    var star_elements = $(this).parent().parent()
    star_elements.find(".fa-star").each(function(i,elem) {
        console.log(i + $(elem).attr("class"));
    })
})

  <span id="view:_id1:_id338:_id343:repeat2:0:stars">
<span id="view:_id1:_id338:_id343:repeat2:0:_id442:inlineaction" class="kompetensdlg" style="background-color: red;">
    <a id="view:_id1:_id338:_id343:repeat2:0:_id442:link5" href="#" title="Grund"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField1" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link10" href="#" title="God"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField2" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link4" href="#" title="Utmärkt"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField3" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link6" href="#" title="Avancerad"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField4" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link7" href="#" title="Expert"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField5" class="fa fa-star yellowstar"></i></a><span id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField6" class="kmsg"></span></span>
    </span>

Answer 1

如您所见，仅使用了 5 个索引。它们在您的日志中多次出现。似乎您的鼠标悬停处理程序被多次触发。您还可以通过在循环外向鼠标悬停处理程序添加日志来验证这一点。

确保您正在使用的插件（或您的代码）不会在内部触发鼠标悬停，并且悬停的元素具有您期望的大小。当然还要确保您的处理程序没有多次绑定。

编辑：

你提供的代码对我来说似乎很完美（即使少了一个分号）。看看这个fiddle。您期待不同的行为吗？

（我只能在答案中提供 fiddle 代码，所以这里又是你的代码，添加了分号。如上所述，它似乎工作正常）

$(".fa-star").bind("mouseover", function(e){
    var star_elements = $(this).parent().parent();
    star_elements.find(".fa-star").each(function(i,elem) {
        console.log(i + $(elem).attr("class"));
    })
});

编辑：

在我看来，您正在使用 JSF。可能是，您的脚本被 ajax 更新了多次，因此处理程序被绑定了多次？

考虑在绑定处理程序之前立即记录日志，以确保不是这种情况。

Answer 2

考虑到每次鼠标悬停在每个 i.fa-star 元素上都会触发代码。因此，如果您的鼠标只是越过一颗星然后越过另一颗星，您将获得 10 个日志。如果您移动鼠标，您将获得数千。

Answer 3

也许mouseover事件被触发了不止一个，尝试在第一个之后添加一些延迟。

$(".fa-star").bind("mouseenter", function(e){
var star_elements = $(this).parent().parent()
star_elements.find(".fa-star").each(function(i,elem) {
    console.log(i + $(elem).attr("class"));
})

})

用 jQuery 遍历 HTML

Traversing HTML with jQuery

javascript

jquery

jquery-traversing

xpages