how to add rating funtion to particular td in $.each function

Question

I want to know how to select particular td in table.

$.each(result.HotelSearchResult.HotelResults, function (index, item) {
    var imgPath = item.HotelPicture;
    var rate = item.StarRating;
    var table = $('#tableId'); 
    var rows = '<tr><td rowspan="4" width="16.666%"><img src="' + imgPath + '" />'+ "</td>";                                            
    rows += '<tr><td class="code">' + addScore(rate, $("td.code")) + "</td></tr>";                                               
    table.append(rows);
});

Here, addScore is a function and it requires an element as its second parameter to append stars according to rating. I am following this post, but in my code it is appending all the ratings to particular td for each iteration. This means if there are 20 arrays then its appending 20 ratings to each td in the table. I want to append one rating per td.

This is my table:

<div id="divResult5"></div>   
<table>
    <tr></tr>
    <tbody id="tableId" style="border:solid 1px red;"></tbody>
</table>

Please tell me how it should be done.

Can it is possible for you to create a working snippet or fiddle with complete HTML, JS and CSS. It will be easy if we have that. — vijayP, Jun 07 '16 at 06:35
`$("td.code")` will return all the `` elements with class "code". That is the reason. — Sabith, Jun 07 '16 at 06:38
@vijayP just give me 5 min more, i will provide working fiddle — duke, Jun 07 '16 at 06:57

Dhananjaya Kuppu · Accepted Answer · 2016-06-07T08:01:07.990

You can modify addScore as below and try:

function addScore(score) {
 var className = 'stars-container stars-'+score.toString();
 return "<span class='"+className+"'>★★★★★</span>";
}

And invoke addScore as below:

rows += '<tr><td class="code">' + addScore(rate) + '</td></tr>';

Here is the reason why the original function is not working: The original function was expecting a DOM element as second argument, and it appends the score span element to the DOM element.

In your case when you are sending $("td.code") there are two problems associated with it: The selector "td.code" will select all td-elements whose class is ".code" which means it behaves as below :
=> when it iterates first row, it will not find any td element because the current td element is not yet in DOM.
=> when it iterates second row, it will not find current td element but it will find td element of the first row because the first row td-element is also having the same class ".code"
=> when it iterates nth row, it will not find current td nth element but it will find td elements of the (n-1) rows

So as current td element to which you are trying to append stars is not yet in DOM, you cannot pass that as second argument.

Instead you need a function that will generate HTML markup (span with stars) and you can directly invoke that function, addScore(score) will return the markup.

now, it is working fine thnx but i cant understand this function plzz explain me — duke, Jun 07 '16 at 07:12
@duke I have explained, added some more description in answer. — Dhananjaya Kuppu, Jun 07 '16 at 08:03

how to add rating funtion to particular td in $.each function

1 Answers1