求助：JQuery实现元素高度遍历至指定值时添加特殊div

嘿，我明白你的问题了——你想在元素高度逐步增长到500、1000、1500px的过程中，每到达一个阈值就添加特殊div，但之前的代码只在执行瞬间做了一次高度判断，自然抓不到动态变化的过程，所以没生效。

问题根源 #

你原来的代码是直接判断元素当前的高度是否等于目标值：

var containerDiv = $('#someElement'); 
if(containerDiv.height() == 500 || containerDiv.height() == 1000 || containerDiv.height() == 1500) { 
  $('<p>Test</p>').appendTo(containerDiv); 
}

这种写法只能在代码运行的那一瞬间检查高度，如果元素高度是动态遍历增长（比如滚动加载内容、动画拉伸高度），单次判断根本无法捕捉到高度跨越阈值的过程，而且用==还可能因为高度不是精确值（比如内容块导致高度跳到510px）而错过触发时机。

针对性解决方案 #

根据你的场景不同，有几种可行的实现方式：

场景1：滚动/内容加载导致高度逐步变化

如果是滚动页面或动态加载内容让元素变高，你可以在触发高度变化的事件（比如滚动事件）里持续检查高度，再用标志位避免重复添加：

// 用Set存储已触发的阈值，防止重复添加元素
var triggeredHeights = new Set();
var containerDiv = $('#someElement');

// 监听滚动事件（可根据实际触发源调整，比如内容加载完成的回调）
$(window).on('scroll', function() {
  var currentHeight = containerDiv.height();
  
  // 用>=判断，避免因高度不精确错过触发时机
  if (currentHeight >= 500 && !triggeredHeights.has(500)) {
    $('<p>Test - 达到500px</p>').appendTo(containerDiv);
    triggeredHeights.add(500);
  }
  if (currentHeight >= 1000 && !triggeredHeights.has(1000)) {
    $('<p>Test - 达到1000px</p>').appendTo(containerDiv);
    triggeredHeights.add(1000);
  }
  if (currentHeight >= 1500 && !triggeredHeights.has(1500)) {
    $('<p>Test - 达到1500px</p>').appendTo(containerDiv);
    triggeredHeights.add(1500);
  }
});

场景2：动画让元素高度逐步变化

如果是用jQuery的animate等方法让元素高度动画增长，可以利用动画的step回调，在每一步动画中检查高度：

var containerDiv = $('#someElement');
var triggeredHeights = new Set();

// 示例：让元素高度动画增长到2000px
containerDiv.animate({
  height: '2000px'
}, {
  // 每一步动画都会执行这个回调
  step: function(currentHeight) {
    if (currentHeight >= 500 && !triggeredHeights.has(500)) {
      $('<p>Test - 达到500px</p>').appendTo(containerDiv);
      triggeredHeights.add(500);
    }
    if (currentHeight >= 1000 && !triggeredHeights.has(1000)) {
      $('<p>Test - 达到1000px</p>').appendTo(containerDiv);
      triggeredHeights.add(1000);
    }
    if (currentHeight >= 1500 && !triggeredHeights.has(1500)) {
      $('<p>Test - 达到1500px</p>').appendTo(containerDiv);
      triggeredHeights.add(1500);
    }
  }
});

场景3：监听元素自身高度变化（精准）

如果元素高度是因为内部内容动态插入/删除导致变化，可以用MutationObserver监听元素的尺寸变化，这是最精准的方式：

var containerDiv = document.getElementById('someElement');
var triggeredHeights = new Set();

// 创建观察者实例
var observer = new MutationObserver(function(mutations) {
  var currentHeight = containerDiv.offsetHeight;
  
  if (currentHeight >= 500 && !triggeredHeights.has(500)) {
    $(containerDiv).append('<p>Test - 达到500px</p>');
    triggeredHeights.add(500);
  }
  if (currentHeight >= 1000 && !triggeredHeights.has(1000)) {
    $(containerDiv).append('<p>Test - 达到1000px</p>');
    triggeredHeights.add(1000);
  }
  if (currentHeight >= 1500 && !triggeredHeights.has(1500)) {
    $(containerDiv).append('<p>Test - 达到1500px</p>');
    triggeredHeights.add(1500);
  }
});

// 配置观察选项，监听元素的样式变化和子元素变化
observer.observe(containerDiv, {
  attributes: true,
  attributeFilter: ['style'],
  childList: true,
  subtree: true
});

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