Элемент стиля внутри jQuery

Question

Когда я применяю стиль к определенному элементу, все элементы внутри, на которые будет автоматически влиять стиль. Как я могу ограничить стиль для определенного элемента внутри моего кода?

Мой код выглядит следующим образом:

$.each(result, function(i, item) { 

tr.append($("<td/>").html('<label name="qty" class="name">'+item['ITEM_NAME']+'</label>')).css('color', '#819FF7'); 
tr.append("<td>" + item['QUANTITY'] + "</td>"); 
}); 

$('#tbl_items').append(tr); 

И, наконец, HTML таблица

<table id="tbl_items"></table> 

Что мне нужно применить CSS color только для ITEM_NAME<td>

Возможно ли это? или это правильный путь?

Answer 1

Вы можете создать элемент, который нужно в строке:

var e = $(item['ITEM_NAME']); 

и применить алла вы хотите к нему:

e.css(...) 

, а затем добавить его там, где вы хотите.

В вашем коде вы цепляете действия, а цепочки jQuery работают всегда на всем выбранном селекторе. Если не использовать .find(...), но в вашем примере это будет неясно.

Answer 2

Вам нужно будет применить css по определенному элементу на всей TR.

var items = ["Orange", "Apple", "Banana"];

$.each(items, function (i, item) { 

    var tr = $('<tr>'); 

    var td = $('<td>').append($('<lable>').attr("name", "qty") 
     .addClass("name") 
     .text(item) 
     .css('color', '#819FF7')); 

    tr.append(td); 

    tr.append("<td>" + item + " Quatity" + "</td>"); 

    $('#tbl_items').append(tr) 
}); 

Заканчивать этот js fiddle

Применить CSS условно.

var td = $('<td>').append($('<lable>').attr("name", "qty") 
      .addClass("name") 
      .text(item); 

    if(item == 'Orange'){ 
    td = td.css('color', '#819FF7')); 
    }