Jquery 如何迭代列表并根据窗口大小进行修剪？

我有一些古怪的行为发生，我不知道为什么（这里是新手）。我希望你训练有素的眼睛能看到我做错了什么

目标 随着屏幕大小的调整，较长的标题将被“…”取代（尚未添加…）

发生了什么事 出于某种原因，我只获得列表中的第一个标题（CEO），以及列表中其余元素的标题（字符串），即使我使用了each（）。另外，这可能是因为它还不能正常工作，不管窗口大小如何，整个div都会被修剪

您可以在控制台中看到，只有第一个被记录，并且修剪工作不正常

直播版 在这里可以看到实际的代码（代码段编辑器可能太小）：

//修剪单词
$（'.team title'）。每个（函数（）{
var theString=$（this.html（）；//字符串
函数trimWords（）{//根据类别博客页面的宽度更改字数
console.log（字符串）；
log（“字符串”，字符串）；
var contentWidth=$（document）.width（）；//获取浏览器的宽度
如果（内容宽度<600）{
var maxLength=80//要提取的最大字符数
}
否则如果（contentWidth>=600&&contentWidth<1025）{
var maxLength=400
}
else if（contentWidth>=1025&&contentWidth<1279）{
var maxLength=40
}
否则如果（contentWidth>=1279）{
var maxLength=75
}
//将字符串修剪到最大长度
var trimmedString=theString.substr（0，maxLength）；
//重新修剪，如果我们在一个词的中间
console.log（trimmedString，maxLength）；
trimmedString=trimmedString.substr（0，Math.min（trimmedString.length，trimmedString.lastIndexOf（“”））；
$（“.team title”）.html（trimmedString）；
}
trimWords（）；
$（窗口）。调整大小（文字）
});
.li{
列表样式：无；
}
/*形象*/
.盒子{
位置：相对位置；
}
.box img{
宽度：350px；
显示：无；
位置：绝对位置；
排名：0；
左：0；
}
.主动img{
显示：块；
}
/*姓名和职务*/
.团队详细信息{
字体大小：1.6rem；
}
.团队详细信息a{
边缘底部：10px；
边框底部：2倍纯色透明；
}
.团队详细信息a：悬停{
底部边框：2件纯黑；
光标：指针；
}
.团队内容，
.改变这个{
显示器：flex；
位置：相对位置；
字体大小：1.4rem；
}
.团队内容.框{
弹性：1；
}
.flex这个项目{
宽度：50%；
空白：nowrap；
}
@仅介质屏幕和（最大宽度：768px）{
.仅限手机{
显示：块；
}
.李{
边框底部：1px实心#000；
填充：20px0；
}
.队名{
字体大小：1.0rem；
}
}



查德·赫瑟林顿


尼克拉森


卡莉·布罗德里克