jQuery

Question

这段代码我有点卡住了，所以我希望你能帮助我，这个问题可以帮助其他人:)

我想要完成的是将 class 添加到一个多行的跨度的 parent().parent() （我不知道如何用英语称呼它） . 为了查看跨度是否使用多条线，我决定测量跨度的高度。如果跨度高于 25px，我肯定知道它使用了不止一行。对于每个符合该条件的跨度，我想将 class 添加到 parent().parent() 以便我可以使用 css.

设置样式

我的 html 看起来像这样：

<li><label><span class="abc-span">a</span><span class="text-that-is-measured">blablablablabla</span></label></li>
<li><label><span class="abc-span">b</span><span class="text-that-is-measured">blablablablabla</span></label></li>
<li><label><span class="abc-span">c</span><span class="text-that-is-measured">blablablablabla</span></label></li>

我的脚本如下所示：

var items = [];
$('span.text-that-is-measured').each(function (i, e) {
  items.push($(e));
});

for (var i = items.length - 1; i >= 0; i--) {
    console.log(items[i]);
    var spanheight = $(items[i]).height();
    if ( spanheight > 30) {
        $(items[i]).parent().parent().addClass('exampleclass');
    }
};

问题是它只会给出符合条件 a class "exampleclass" 的第一个 li，我希望它在 each li

有人知道我做错了什么吗？

我希望我的解释足够清楚，英语不是我的母语。

提前致谢！

谢谢大家的讲解和帮助！

Answer 1

您可以使用 .filter() 函数获取高度大于 30px 的跨度以及 .closest('li') 以获得最接近的 li（您指的是 parent().parent()）：

$('span.text-that-is-measured').filter(function(){
    return $(this).height() > 30; //for height higher than 30
}).closest('li').addClass('exampleclass');//add class to li element

Answer 2

你需要使用closest获取祖先li

试试这个：

$('span.text-that-is-measured').each(function(i, e) {
    if ($(this).height() > 30) {
        $(this).closest('li').addClass('exampleclass');
    }
});

Answer 3

您可以使用 .closest() 获取祖先 li，然后使用 .siblings() 查找其他 li 元素。

var targetListItem = $("span.text-that-is-measured").filter(function() {
    return $(this).height() > 25;
}).closest("li");
targetListItem.addClass("exampleclass");
targetListItem.siblings().addClass("exampleclass");

有点long-winded。您可以使用 great-grandparent.

的 .children() 而不是使用 span 的 grandparent

$("span.text-that-is-measured").filter(function() {
    return $(this).height() > 25;
}).closest("li").parent().children().addClass("exampleClass");

这两个示例都基于 li 具有 parent ul 或类似元素的元素。

Answer 4

以下代码可以满足您的需求：

$('span.text-that-is-measured').each( 
    function (i, e) {  
        var spanHeight= $(e).height();  
        if ( spanHeight > 30) {
            $(e).closest('li').addClass('exampleclass');
        }
})

jQuery - 将 class 添加到每个使用多行的跨度

jQuery - Add class to each span that uses more than one line

arrays

each

parent