jQuery父选择器匹配多组div多级父元素失效问题咨询

原有代码仅在单组结构下生效的原因 #

• $('.child')会匹配页面内所有类为child的元素集合，调用.parents().eq(4)时，仅会读取**第一个匹配到的child元素的第4级父元素，后续所有child元素的父元素宽度不会被单独判断。且判断通过后修改的是全局所有.child p的字体样式，完全无法匹配多组结构下每组独立判断的需求。
• 原有判断逻辑使用.css('width') >= '595px'属于字符串比较，仅在特殊场景下能得到正确结果，存在逻辑隐患，直接对比数值更稳妥。

多组结构下的修复代码 #

通过遍历每一个child元素，单独处理每组的判断和样式修改逻辑即可：

$(function() {
  // 遍历所有.child元素，每组单独处理
  $('.child').each(function() {
    // width()方法直接返回数值类型的宽度，无需处理px单位
    const level4ParentWidth = $(this).parents().eq(4).width();
    if (level4ParentWidth >= 595) {
      // 仅修改当前child下的p标签
      $(this).find('p').css('font-size', '25px');
    }
  })
})

内容的提问来源于stack exchange，提问作者Maykel