基于子元素字符长度为Bootstrap 4移动端列添加clear:both样式

看起来你已经有了核心思路，但现有脚本存在几个逻辑问题，我帮你调整一下，让它能准确实现需求：

原脚本的问题点 #

• 窗口宽度判断放在了$(document).ready()外面，只会在页面首次加载时执行一次，窗口 resize 时不会重新计算
• $('.tileh4').text().length取的是所有.tileh4文本的总长度，不是单个元素的文本长度，没法针对每个区块单独判断
• 没有处理窗口尺寸变化后的样式重置，比如从移动端切回桌面端时，残留的clear样式不会被移除

修正后的实现方案 #

首先建议先定义一个CSS类，比直接用.css()更便于维护：

.clear-both {
  clear: both !important;
}

然后是优化后的JavaScript代码：

$(document).ready(function() {
  // 封装处理逻辑为函数，方便复用
  function updateClearStyles() {
    // 先移除所有元素的clear类，避免样式残留
    $('.applyclear').removeClass('clear-both');

    // 仅在移动端宽度下执行判断
    if ($(window).width() < 767) {
      // 遍历每个.tileh4元素，单独判断文本长度
      $('.tileh4').each(function() {
        // 去掉文本前后空格后计算长度，避免空格干扰判断
        const textLength = $(this).text().trim().length;
        // 这里可以根据你的需求调整长度阈值，比如你原来的>3
        if (textLength > 3) {
          // 找到当前元素的父级.applyclear，添加clear类
          $(this).closest('.applyclear').addClass('clear-both');
        }
      });
    }
  }

  // 页面加载完成后执行一次
  updateClearStyles();

  // 监听窗口resize事件，尺寸变化时重新计算
  $(window).on('resize', updateClearStyles);
});

关键说明 #

• 用.each()遍历每个.tileh4，确保每个区块的判断都是独立的
• 使用.closest('.applyclear')精准定位父元素，比:has()选择器更高效直接
• 每次执行前先移除所有clear-both类，保证窗口切换尺寸时样式能正确重置
• 添加了窗口resize监听，确保响应式场景下的动态适配

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