Question

我对这段代码有点担心，所以我希望你能帮助我，这个问题可以帮助别人：）

我想要完成的是将一个类添加到父（）。parent（）（我不知道如何用英语调用它）的跨度而不是更多行。为了查看跨度是否使用多条线，我决定测量跨度的高度。如果跨度高于25px，我肯定知道它使用多行。对于匹配该条件的每个span，我想将一个类添加到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');
    }
};

问题是，只会给第一个匹配条件“{exampleclass”的li，我希望它在每个 li

有人知道我做错了吗？

我希望我的解释很清楚，英语不是我的第一语言。

提前致谢！

感谢大家的解释和帮助！

Answer 1

您可以使用.filter()函数获取高度大于30px的跨度以及.closest('li')以获得最接近的li（一个您指的是父（）。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");

哪个有点啰嗦。您可以改为使用曾祖父母的span，而不是与.children()的祖父母一起工作。

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

这两个示例均基于父li或类似内容的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 - 为使用多行的每个span添加类

4 个答案: