jQuery each()在iOS上返回意外结果

wtlkbnrh  于 2023-04-05  发布在  jQuery
关注(0)|答案(2)|浏览(115)

我在iOS Safari和iOS设备上遇到了jQuery each()和find()方法的问题。
squareTextWidth在iOS中不返回任何内容,而在PC上它返回正确的offsetWidth值。事实上,squareText[0]在Safari上下文中不存在。
console.log(squareText)在Safari的JS控制台中返回DOM对象。
我做错了什么?有没有变通的办法?

function example() {
  $('div.access').each(function() {
    let squareText = $(this).find('.text');
    let squareTextWidth = squareText[0].offsetWidth;
    console.log(squareTextWidth);
  });
}
example();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="access">
  <span class="text">Example text 1</span>
</div>
<div class="access">
  <span class="text">Example text 2</span>
</div>
<div class="access">
  <span class="text">Example text 3</span>
</div>
<div class="access">
  <span class="text">Example text 4 Longer text</span>
</div>
r55awzrz

r55awzrz1#

你的代码似乎在Safari iOS 16中工作让我们看看这一个在你的Safari中是否也能更好地工作:
原则上,你并没有得到你认为你是什么,似乎有些浏览器并不介意,有些则是:

let $x = $(selector).find(otherSelector); // returns a jQuery collection
let y = $x[0]; // tricky. You want the DOM element but get the first jQuery element in the collection
let z = $x.eq(0)[0]; // better. Get the DOM element from the first jQuery element in the collection

x一个一个一个一个x一个一个二个x
结果:
Chrome 111.0.5563.146(Official Build)(x86_64)OSX

Example text 1: 97
Example text 2: 97
Example text 3: 97
Example text 4 Longer text: 176

Safari OSX 16.3(18614.4.6.1.6)

Example text 1: 97
Example text 2: 97
Example text 3: 97
Example text 4 Longer text: 176

Safari iOS 16.4

Example text 1: 97
Example text 2: 97
Example text 3: 97
Example text 4 Longer text: 176
zujrkrfu

zujrkrfu2#

好吧,我的.text实际上是一个绝对定位的<span>,带有inline-flex和其他几个flex属性,safari无法计算offsetWidth,但其他浏览器可以。将其更改为<p>标签,现在它可以正常工作。
我的思想集中在问题的错误部分。
谢谢你的帮助。

相关问题