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

Question

如何获取每个 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>

- user7336361

---

$('.swiper-slide').each(function(){$(this).width();}) - tech2017

@techLove 谢谢，但我认为这会给我百分比而不是像素，我是对的吗？ - user7336361

@AhmedMohamed http://api.jquery.com/width/ “.css(width)和.width()之间的区别在于后者返回一个无单位的像素值（例如，400），而前者返回一个带有单位的值（例如，400px）。当需要在数学计算中使用元素的宽度时，建议使用.width()方法。” - Ethilium

是的，我想要为每个swiper-slide自动分配宽度，确保每个swiper-slide都有不同的宽度，并且这取决于字母数量，因为我告诉你它非常默认地为每个swiper分配id。 - user7336361

@techLoe 如果不像这样添加特定的宽度：width(150)，而只使用width()，它就不会添加任何宽度。希望你能理解我的意思。为了更好地理解，我必须添加一个特定的宽度来使你的代码工作。 - user7336361

Answer 1

你可以使用Jquery的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>

- Ethilium