jQuery最后一个子选择器

Question

This is not working and I don't know why. I have tried it in the console it works, but when I change my js codes it does not work.

$('#recipe-table td:last-child').width();

How can I get it the correct way?

this is the html

           <div id="div-lists">  
                    <div id="div-recipe-table">
                    <table class="" id="recipe-table" cellspacing="0" cellpadding="0">
                        <tbody>                                
                                    <tr class="recipe-list" data-ng-repeat="recipe in recipe_data" ng-click="recipe_click(recipe.CodeListe,recipe.Name)">
                                        <td id="td-img{{recipe.CodeListe}}">
                                            <center>
                                                <span id="img{{recipe.ID}}X">
                                                    <a id="{{recipe.ID}}" href="javascript:void(0);">
                                                        <img  ng-if="recipe.Pictures !==''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/><img  ng-if="recipe.Pictures===''" class="images" src="images/default.png" id="img1"/>
                                                    </a>
                                                </span>
                                            </center>
                                        </td>
                                 <!-- I want to get The width of this <td> -->
                                        <td class="recipes"> 
                                            <div id="div-recipe-name">
                                                <strong>{{recipe.Name}}</strong></div>
                                        </td>
                                 <!-- Until here
                                    I already tried using $('.recipes').width(); but it returns 0 -->
                                    </tr>
                        </tbody>
                    </table>
                    </div>
                    <div id="div-list-loading"></div>
                    <div id="div-list-noresults">{{ui_translation.UIT[171610]}}</div>
                </div>
            </div>

Answer 1

Try below jQuery

You can use .last() method constructs a new jQuery object from the last element in that set.

$('#recipe-table td').last().width();

JSFIDDLE DEMO

Answer 2

Try the following:

$('#recipe-table td:last').width();

From the jQuery Docs

While :last matches only a single element, :last-child can match more than one: one for each parent.

Since you have already tried $('.recipes').width(); does the following provide you any results:

$('.recipes').each(function (index, elem) {
    alert($(this).width());
});