如何通过data-value属性获取同DIV中对应的data-target属性

针对你的需求，这里提供原生JavaScript和jQuery两种实现方案，利用属性选择器定位元素后获取对应属性：

原生JavaScript实现 #

// 存储目标data-value的变量
const targetDataValue = "?url=homepage";

// 通过属性选择器定位对应DIV元素
const targetDiv = document.querySelector(`div[data-value="${targetDataValue}"]`);

// 若找到元素，获取其data-target属性值
if (targetDiv) {
  // 方式1：使用dataset API（推荐）
  const dataTarget = targetDiv.dataset.target;
  // 方式2：使用getAttribute方法
  // const dataTarget = targetDiv.getAttribute('data-target');
  console.log(dataTarget); // 输出：practice-page-1.php
}

jQuery实现 #

// 存储目标data-value的变量
const targetDataValue = "?url=homepage";

// 通过属性选择器定位对应DIV元素
const $targetDiv = $(`div[data-value="${targetDataValue}"]`);

// 若找到元素，获取其data-target属性值
if ($targetDiv.length) {
  // 方式1：使用data方法（推荐，会自动解析数据类型）
  const dataTarget = $targetDiv.data('target');
  // 方式2：使用attr方法
  // const dataTarget = $targetDiv.attr('data-target');
  console.log(dataTarget); // 输出：practice-page-1.php
}

说明 #

因为你提到每个DIV的data-value和data-target是唯一对应关系，所以上述选择器只会匹配到唯一的目标元素，无需担心多元素冲突问题。

内容的提问来源于stack exchange，提问作者Mike M.