如何获取每个 swiper-slide 元素的宽度答案

【问题标题】：How can get the width for each swiper-slide element如何获取每个 swiper-slide 元素的宽度
【发布时间】：2017-05-05 18:35:06
【问题描述】：

如何获取每个 swiper-slide 元素的宽度？

这是我的代码：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">First Box</div>
        <div class="swiper-slide">Second Box</div>
        <div class="swiper-slide">Third Box</div>
        <div class="swiper-slide">Forth Box</div>
    </div>
</div>
<script>
$(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        setWrapperSize: true,
        freeMode: true
    });
});
</script>

【问题讨论】：

$('.swiper-slide').each(function(){$(this).width();})
@techLove 谢谢，但我认为这会给我 %，而不是 px 我是对的吗？
@AhmedMohamed api.jquery.com/width ".css(width)和.width()的区别在于后者返回一个无单位的像素值（例如400）而前者返回一个值单位不变（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用 .width() 方法。"
不，它以 px 为单位。见api.jquery.com/width。还有innerWidth() & outerWidth()等函数。
@Ethilium 真的很感谢你和techLove 谢谢你，但是你的代码可以像这样为每个swiper-slide添加一个特定的宽度 $('.swiper-slide').each(function(){$ (this).width(150);}) 但我想获取每个 swiper-slide 的宽度，希望你能理解我。

标签： jquery html css swiper

【解决方案1】：

您可以使用Jquery's eq 单独选择每个元素。这是我认为您要求的演示：

$('#changeWidth').on('click', function () {
  $('.swiper-slide').eq(0).width(65);
  $('.swiper-slide').eq(1).width(150);
  $('.swiper-slide').eq(2).width(250);
  $('.swiper-slide').eq(3).width(350);
  console.log( $('.swiper-slide').eq(0).width() );
  console.log( $('.swiper-slide').eq(1).width() );
  console.log( $('.swiper-slide').eq(2).width() );
  console.log( $('.swiper-slide').eq(3).width() );
});

.swiper-slide {
  width: 50px;
  border-style: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">First Box</div>
    <div class="swiper-slide">Second Box</div>
    <div class="swiper-slide">Third Box</div>
    <div class="swiper-slide">Forth Box</div>
  </div>
</div>
<button id="changeWidth">
change width
</button>

【讨论】：