javascript - jQuery 最后一个子选择器

Question

这不起作用，我不知道为什么。我在控制台中尝试过它可以工作，但是当我更改我的js代码时它不起作用。

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

如何以正确的方式获取它？

这是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

尝试以下操作:

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

来自 jQuery Docs

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

既然您已经尝试过$('.recipes').width();，以下内容是否会为您提供任何结果:

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