已有DOM元素时，如何选择与之关联的元素？

嘿，这个坑我之前踩过！你说得对，直接把DOM元素对象和CSS选择器字符串拼接肯定行不通——一个是对象类型，一个是字符串类型，根本没法直接相加。下面给你几种靠谱的实现方式：

方法1：转成jQuery对象后用.find()（最常用） #

先把原生DOM元素包装成jQuery对象，然后用.find()方法在它的后代里匹配选择器，这也是你开头提到的正确写法：

var myDomElement = document.getElementById("foo");
// 先包装成jQuery对象，再查找内部的.bar元素
$(myDomElement).find(".bar");

方法2：利用jQuery选择器的上下文参数 #

jQuery的选择器支持第二个参数，用来指定查找的上下文范围，效果和.find()完全一样，写法更简洁：

var myDomElement = document.getElementById("foo");
// 第二个参数就是查找的上下文，会在myDomElement内部找.bar
$(".bar", myDomElement);

方法3：针对其他关联关系的专用方法 #

如果你的需求不是找后代元素，而是父元素、兄弟元素这类其他关联关系，jQuery有专门的方法可以直接用：

var myDomElement = document.getElementById("foo");

// 找myDomElement的父元素中带.bar类的
$(myDomElement).parent(".bar");

// 找myDomElement的同级元素中带.bar类的
$(myDomElement).siblings(".bar");

// 找myDomElement后面紧邻的带.bar类的兄弟元素
$(myDomElement).next(".bar");

核心思路就是：别想着把对象和字符串硬拼，而是借助jQuery的API来基于已有的DOM元素做范围限定或者关系查找，这样既规范又不会出错～

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