Question

我正在尝试应用文本与sibling元素匹配的类。

我的确定条件是：

我有一个基于我通过数据库获取的数据的多行表。其中一个td元素具有我定义的类。现在我想只在这个元素的文本与另一个元素匹配的td元素上应用一个类。

所以，就像html/text相等的那个人一样。

我试过了：

$('#table tbody>tr').find('td[class^="customtd"]').each(function() {
    if($(this).html().trim() == $(this).siblings('td').html().trim()) {
        $(this).addClass('active');
    }else {
        $(this).removeClass('active');
    }
});

Answer 1

你必须迭代每个兄弟td（或使用filter），检查文本匹配，然后添加类：

$('#table tbody>tr').find('td[class^="customtd"]').each(function() {
    var text = $(this).text();
    $(this).siblings("td").filter(function() {
        return $(this).text() == text;
    }).addClass("active");
});

Answer 2

您必须设置要搜索的值，然后遍历所有表数据。如果找到匹配项，请添加特定类。

此外，您应该在jQuery中缓存变量并避免使用each（）函数，因为与for循环相比，它的性能非常差。

//cache the element you are searching for
var search = $('.customtd').html().trim();
//cache the whole table so we can use a for loop
var table = $('#table tbody>tr>td');

//use for loop for more performance
for (var i = 0; i < table.length; i++) {
    if(table.eq(i).html().trim() == search) {
        table.eq(i).addClass('active');
    }else {
        table.eq(i).removeClass('active');
    }
}

这是一个有效的例子：

http://jsfiddle.net/jnh2heuh/2/

在匹配的文本上应用CSS

2 个答案: