如何无需遍历同class元素，检查特定class和data-id的div是否存在？

问题背景 #

页面内存在多个class相同的div，每个div的data-id值唯一。需要检查是否存在data-id等于特定值的div，找到后操作其内容，未找到则添加对应元素。当前使用.each()遍历所有元素实现，但这类div可能超过10个，且检查操作每分钟触发多达100次，存在性能隐患。

当前实现代码（可运行但需遍历DOM）：

let found = false;
$('.discussion').each(function(){
    if($(this).data("id")==myVariable){
        //找到目标元素，执行操作
        found = true;
    }
});
if(found===false){
    //未找到目标元素，添加对应class和data-id的div
}

页面DOM结构示例：

<div id="conversations">
    <div class="conversation" data-id="a"></div>
    <div class="conversation" data-id="b"></div>
    <div class="conversation" data-id="c"></div>
    <div class="conversation" data-id="d"></div>
    <div class="conversation" data-id="e"></div>
</div>

优化方案：用属性选择器直接定位 #

无需手动遍历所有元素，利用jQuery属性选择器精准匹配class与data-id，浏览器原生DOM查询引擎会直接定位目标元素，大幅提升效率：

// 直接构造选择器获取目标元素
const targetEl = $('.conversation[data-id="' + myVariable + '"]');

if (targetEl.length > 0) {
    // 找到元素，执行操作（示例：更新内容）
    targetEl.text('已找到并更新内容');
} else {
    // 未找到，添加新div到容器中
    $('#conversations').append(`<div class="conversation" data-id="${myVariable}"></div>`);
}

性能优势 #

• 跳过手动遍历步骤，借助浏览器优化的查询机制，减少DOM操作开销
• 代码逻辑更简洁，可读性更强
• 针对高频触发场景（每分钟100次），能有效降低性能损耗

超高频场景额外优化：缓存元素 #

如果操作触发频率极高，可将所有data-id对应的元素缓存到对象中，后续检查优先查缓存，彻底避免重复DOM查询：

// 初始化缓存对象，存储data-id与对应元素的映射
const conversationCache = {};

// 页面加载时填充初始缓存
$('.conversation').each(function() {
    const id = $(this).data('id');
    conversationCache[id] = $(this);
});

// 后续检查逻辑
if (conversationCache[myVariable]) {
    // 缓存命中，直接操作元素
    conversationCache[myVariable].text('从缓存获取并更新');
} else {
    // 缓存未命中，查询DOM
    const targetEl = $('.conversation[data-id="' + myVariable + '"]');
    if (targetEl.length) {
        // 更新缓存
        conversationCache[myVariable] = targetEl;
        targetEl.text('DOM查询找到并更新');
    } else {
        // 添加新元素并同步缓存
        const newEl = $(`<div class="conversation" data-id="${myVariable}"></div>`);
        $('#conversations').append(newEl);
        conversationCache[myVariable] = newEl;
    }
}

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