jQuery中使用变量选择含多单词类名的div元素问题

嘿，我来帮你搞定这个困扰！你遇到的问题主要是字符串拼接错误和HTMLCollection的使用方式，下面分两种场景给你详细解法：

一、jQuery 场景：正确拼接变量到选择器里 #

你之前写的 $("div[class='+ variable +']") 是错误的——这里的 + variable + 会被当成字符串的一部分，而不是变量引用！JS根本不会识别这个变量，自然找不到元素。

正确的写法有两种：

1. 传统字符串拼接：把变量从引号里拿出来，用 + 连接

var targetClass = "LIKES & DISLIKES";
// 注意引号的闭合：先写'，再拼变量，再补全'
var $targetDiv = $("div[class='" + targetClass + "']");

2. ES6 模板字符串（更简洁）：用反引号`包裹，变量放在${}里

var targetClass = "LIKES & DISLIKES";
var $targetDiv = $(`div[class="${targetClass}"]`);

如果你的需求不是精确匹配整个class属性，而是只要元素包含这个类名（注意：class名里的空格其实代表多个类），可以直接用类选择器：

// 把class名里的空格换成.，匹配同时拥有这些类的元素
var $targetDiv = $(`.${targetClass.replace(/ /g, '.')}`);

二、原生JS 场景：处理HTMLCollection #

document.getElementsByClassName() 返回的是HTMLCollection，它是一个类数组对象，不是数组，但可以像数组一样用索引访问，也可以转成数组操作：

1. 直接通过索引取元素：

var targetClass = "LIKES & DISLIKES";
var elements = document.getElementsByClassName(targetClass);
// 取第一个匹配的元素（注意：如果没有匹配项，会返回undefined）
var targetDiv = elements[0];

2. 转成数组后操作：
   如果需要更灵活的操作（比如筛选、遍历），可以把它转成数组：

var elementsArray = Array.from(elements);
// 取第一个元素
var targetDiv = elementsArray[0];
// 或者用find筛选（比如确认元素的其他属性）
var targetDiv = elementsArray.find(div => div.textContent.includes("some text"));

3. 更直接的方式：用querySelector
   其实原生JS里用querySelector可以一步到位，写法和jQuery类似：

var targetClass = "LIKES & DISLIKES";
// 精确匹配class属性
var targetDiv = document.querySelector(`div[class="${targetClass}"]`);
// 匹配包含该类的元素
var targetDiv = document.querySelector(`.${targetClass.replace(/ /g, '.')}`);

小提醒 #

注意class名里的特殊字符（比如&）：如果你的HTML里写的是&，那JS里的变量应该用解析后的&（因为DOM会自动解析HTML实体），不要直接用&，否则会匹配不到元素。

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