遍历类元素数组并在jquery中选择同级

Question

我在html中有一个结构

 <div class="combo-wrapper" tabindex="0" style="display: inline-block; width: 120px; height: 23px;">
<div class="combo-button" style="width: 20px; height: 23px; display: inline-block;"></div>
<div class="combo-selected" style="width: 100px; height: 23px; display: inline-block;">Pending For Upload L2-GM</div>
</div>

在同级中，我有一个下拉菜单

<select class="bydd">
<option value="">Select</option>
<option value="H">Hold</option>
<option value="D">Delete</option>
</select>

当我尝试设置标题时

$(".combo-wrapper").each(function (i) {

        $('.combo-wrapper')[i].attr("title", $('.combo-wrapper')[i].siblings(".bydd option:selected").text());

    });

引发未定义的错误

$('.combo-wrapper')[0].siblings()本身不会在控制台中引发函数错误

Answer 1

当您通过索引从jQuery对象检索值时，实际上是在获取底层的DOMElement而不是jQuery对象，因此在尝试获取attr时会出现undefined function错误。

要通过索引获取jQuery对象，您需要使用eq()方法：

$('.combo-wrapper').eq(i).attr("title", $('.combo-wrapper').eq(i).siblings(".bydd option:selected").text());

或者，您可以使用:eq选择器：

$('.combo-wrapper:eq(' + i + ')').attr("title", $('.combo-wrapper:eq(' + i + ')').siblings(".bydd option:selected").text());

Answer 2

因为$('.combo-wrapper')[0]返回一个dom元素引用，该引用没有jQuery相关的方法。

您可以使用this （它也是一个dom元素引用，而不是jQuery包装器）来引用每个循环中的当前元素，然后将其包装在jQuery中以在其上使用jQuery方法

$(".combo-wrapper").each(function (i) {

    $(this).attr("title", $(this).siblings(".bydd").find("option:selected").text());

});

---

另一种方法是

$(".combo-wrapper").attr("title", function () {
    return $(this).siblings(".bydd").find("option:selected").text()
});