Question

我正在尝试执行以下操作：

我需要根据元素本身的宽度和它下面的元素计算元素的填充，我在将填充应用于.class1元素的当前实例时遇到问题，由于某种原因它没有得到应用，我的代码是：

function myFunction() {
    $('.class1, .class2').each(function (){
      var Width1 = $(this).filter('.class1').width();
      var Width2 = $(this).filter('.class2').width();
      var paddingSize = "+=" + (Width1 - Width2) / 2;
      $(this).filter('.class1').css( "padding-left", paddingSize );
  });
}

所以我猜我没有使用过滤功能，在这种情况下不应该使用它？如果我只是将更改应用于$（this），则填充也将应用于.class2，这不是预期的。

编辑：修复拼写错误

Answer 1

这是你想要做的吗？

function myFunction() 
{
  $('.class1').each(function ()
  {
    var elem = $(this);
    var width1 = elem.width();      
    var width2 = elem.next('.class2').width();
    var paddingSize = (width1 - width2) / 2;

    elem.css("padding-left", "+=" + paddingSize);
  });
}

仅当您的.class1和.class2是同一父母的兄弟姐妹时才会有效。

Answer 2

将选择器分开以获得特定宽度。
如果您有多个.class1或.class2，则需要处理此问题。如果情况并非如此，请改用id。

function myFunction() {
  var Width1, Width2,
    $class1 = $('.class1');

  $class1.each(function() {  // Take care with multiple elements
    Width1 = $(this).width();
  });

  $('.class2').each(function() {  // Take care with multiple elements
    Width2 = $(this).width();
  });

  var paddingSize = "+=" + (Width1 - Width2) / 2;
  $class1.css("padding-left", paddingSize); // px Unit, but this is up to you.
}

jQuery选择多个类，但在当前实例上为其中一个更改.css

2 个答案: