2015-01-22 5 views
3

Я пытаюсь применить класс, в котором текст соответствует sibling элементам.Применить CSS для сопоставления текста

Мое определенное условие:

У меня есть таблица с несколькими рядами на основе данных, которые я получаю через базу данных. Один из элементов td имеет мой определенный класс. Теперь я хотел применить класс только к тем 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'); 
    } 
}); 

ответ

3

Вам придется повторять каждый родственный 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"); 
}); 
1

You необходимо установить значение, которое вы ищете, а затем пропустить все данные таблицы. Если вы найдете совпадение, добавьте определенный класс.

Кроме того, вы должны кэшировать переменные в jQuery и избегать использования функции each(), так как ее производительность очень плохая по сравнению с циклами.

//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/

Смежные вопросы