时间戳

首页 > 解决方案 > 获取“堂兄弟”的属性

javascript - 获取“堂兄弟”的属性

问题描述

我有多个带有.clickableCSS 类和数据属性的输入。输入是元素的唯一子label元素。一些标签具有.activeCSS 类。基本结构看起来像

<label class='[active]'>
  <input type='...' class='clickable' data-value='...'>
  text
</label>

每当我单击一个'clickable输入时，我都需要获取作为标签data-value子级的所有输入的 s 。active

有没有一种简单的方法可以用 jQuery 实现这一点？

我正在尝试使用过滤和映射，但我基本上被卡住了。

标签： javascriptjquery

解决方案

尝试这个：

$(document).ready(function() {
  $("input.clickable").click(function() {
    $("label.active > input.clickable").each(function() {
      console.log($(this).data("value"));
      // OR console.log($(this).attr("data-value"));
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class='active'>
  <input type='text' placeholder="foo" class='clickable' data-value='hello_world_1'>
</label>

<label class='active'>
  <input type='text' placeholder="foo" class='clickable' data-value='hello_world_2'>
</label>

参考资料
1. https://api.jquery.com/data/
2. https://api.jquery.com/child-selector/
3. https://johnresig.com/blog/html-5-data-attributes /

推荐阅读