JS 获取指定 data-id 属性按钮的索引方法

可以通过以下方式来获取 data-id 的值为 sid 的按钮是第几个：

1. 首先，使用 JavaScript 选择器选择包含按钮的父元素，例如使用类名选择器选择父元素：

var parent = document.querySelector('.new-from');

2. 然后，获取所有的按钮元素：

var buttons = parent.querySelectorAll('span');

3. 接下来，使用循环遍历所有按钮元素，检查每个按钮的 data-id 属性值是否等于 sid：

var sid = '1'; // 要查找的 data-id 的值
var index = -1; // 初始化 index 为 -1，表示未找到

for (var i = 0; i < buttons.length; i++) {
  if (buttons[i].dataset.id === sid) {
    index = i; // 找到了，更新 index 为当前索引值
    break; // 停止循环
  }
}

4. 最后，index 的值即为 data-id 的值为 sid 的按钮是第几个，如果 index 的值为 -1，则表示未找到符合条件的按钮。

完整的代码示例如下：

var parent = document.querySelector('.new-from');
var buttons = parent.querySelectorAll('span');
var sid = '1'; // 要查找的 data-id 的值
var index = -1; // 初始化 index 为 -1，表示未找到

for (var i = 0; i < buttons.length; i++) {
  if (buttons[i].dataset.id === sid) {
    index = i; // 找到了，更新 index 为当前索引值
    break; // 停止循环
  }
}

console.log('data-id 为' + sid + '的按钮是第' + (index + 1) + '个');

请注意，上述代码假设要查找的 data-id 的值为字符串类型。如果要查找的 data-id 的值为数字类型，需要将 sid 的值改为数字类型，例如：var sid = 1;。