使用jQuery查找父级同级首子元素子节点时setSelectionRange报错解决

你遇到的TypeError: ele.setSelectionRange is not a function错误，本质不是没找到元素，是把jQuery包装对象和原生DOM元素搞混了：

• 你用$()选择器拿到的ele是jQuery封装的对象，只能调用jQuery提供的方法，不能直接用原生DOM的setSelectionRange、.value这类API
• 代码里e.preventDefault漏写了执行括号，属于写法错误，虽然当前场景下不影响核心功能，但属于需要修正的语法问题
• 你写的兄弟节点遍历逻辑太脆弱，只要DOM层级稍作调整（比如多套一层div、调整节点顺序）就会定位失败

JavaScript部分 #

$(document).ready(function () {
  $('.jimmy').click(function(e){
    e.preventDefault(); // 补全执行括号
    jimsFunction(this);
  });
});

function jimsFunction(clickBtn) {
  // 先向上找到按钮和input共同的父容器.colbody，再在容器内找input，层级容错性更高
  let $input = $(clickBtn).closest('.colbody').find('input');
  // 从jQuery对象中取出原生input节点，才能调用原生选中API
  let nativeInput = $input[0];
  
  nativeInput.select();
  // 补全全选范围，兼容移动端Safari的选中逻辑
  nativeInput.setSelectionRange(0, 99999);
  const copyValue = nativeInput.value;
  
  // 剪贴板API是异步操作，加then回调确保复制成功再弹提示
  navigator.clipboard.writeText(copyValue).then(() => {
    alert("Copied: " + copyValue);
  });
}

HTML部分（无需修改，和你原有代码一致即可） #

<div class="colbody">
  <div>
    <input type="text" value="www.brave.com" readonly>
  </div>
  <div>
    <a href="www.google.com" target="_blank">View</a>                                
  </div>
  <div>
    <button type="button" class="jimmy">Copy URL</button>
  </div>
</div>

• 不需要给input加ID/类就能定位：用closest()找共同祖先+find()找目标元素的写法，比逐层找parent、siblings的写法稳定很多，不会因为局部DOM调整失效
• 核心规则记牢：jQuery对象是类数组结构，要调用原生DOM方法，必须通过[下标]或者.get(下标)取出里面的原生节点再操作；如果用jQuery自带方法，比如取输入框值用$input.val()，就不需要转原生节点
• 你原来的元素遍历逻辑其实能匹配到目标input，只是因为没做jQuery对象到原生节点的转换，才会抛出方法不存在的错误

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