Question

从理论上讲，如果我有一个无序项目列表

<ul>
    <li><a>Link1</a></li>
    <li><a>Link1</a></li>
</ul>

我如何使用jQuery执行以下操作？

1）找出每个a元素的宽度

2）找出每个li元素的宽度

3）从父元素a元素的宽度中减去每个子元素li元素的宽度

4）然后将总计添加到每个父li元素

这不起作用：

$('ul > li').each(function() {
  var liWidth = (this).width();
  var aWidth = ('ul > li > a').width();
  var subractedWidth = parseFloat(liWidth) - parseFloat(aWidth);
  var newWidth = subtractedWidth + parseFloat(liWidth);
  $(this).css('width',newWidth);  
});

提前致谢！

Answer 1

您忘记在几个地方使用$，而您正试图获得<a>范围内的<li>宽度，因此您不应该重新查询整个DOM。这样就可以了：

$('ul > li').each(function() {
    var liWidth = parseFloat($(this).width());
    var aWidth = parseFloat($(this).find('a').eq(0).width());
    $(this).width((liWidth - aWidth) + liWidth);
});

Answer 2

你可以做到

$('ul > li > a').each(function () {
    var li = $(this).closest('li'), 
        liWidth = li.width(),
        aWidth = $(this).width();

    li.width(liWidth + (liWidth - aWidth));
});

Answer 3

看起来你忘记了一些$。

$('ul > li').each(function() {
  var liWidth = $(this).width();
  var aWidth = $(this).find('a').width();
  var subractedWidth = parseFloat(liWidth) - parseFloat(aWidth);
  var newWidth = subtractedWidth + parseFloat(liWidth);
  $(this).css('width',newWidth);  
});

简单的jQuery算法

3 个答案: