как получить li width + margin, используя jquery

Question

мой код выглядит примерно так

//css
li{display:inline-block}

//html #li margin and width are dynamic
<ul>
<li style='margin:30px;width:100px;'>Pic</li>
<li style='margin:40px;width:200px;'>Pic</li>
<li style='margin:10px;width:500px;'>Pic</li>
<li style='margin:50px;width:300px;'>Pic</li>
</ul>

как создать функцию jquery, которая будет принимать индекс li в качестве входного и возвращать ширину всех li от начала до этого индекса + поля«влево + вправо»

Examples // something like this   
myFunction(1); //output 440 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 100 width [0] + 200 width [1] )) 

myFunction(2); //output 960 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 10 margin-left [2] + 10 margin-right [2] + 100 width [0] + 200 width [1] + 500 width [2] )) 

Answer 1

Вы ищете outerWidth(true)

например

$('li:eq(0)').outerWidth(true)

, если вы не хотите использовать поле, а хотите использовать только отступ и границу, просто наберите outerWidth()

Таким образом, вы можете просто сложить externalWidth в li как обычно, чтобы получить сумму их всех.

Answer 2

$.fn.sumOuterWidth = function(useMargins) {
  var sum = 0;
  this.each(function() { 
    sum += $(this).outerWidth(useMargins);
  });
  return sum;
};

// example sum the width of the first 2 li's:
$('ul li').slice(0,2).sumOuterWidth(true) 

// Also gets the sum of the width of the first 2 li's:
$('ul li:eq(1)').prevAll().andSelf().sumOuterWidth(true);

Answer 3

//adapt selectors to get only the ul you want
function calculate(i)  {
  if(i >= $("ul").size()) {
    alert("This index doesn't exist");
    return;
  }
  var sum = 0;
  for(var j=0; j<=i; j++) {
    sum = sum + $("ul li:eq("+j+")").outerWidth(true);
  }
  alert("li's width for index "+i+" is "+sum)
}