时间戳

首页 > 解决方案 > 从 getElementsByClassName 获取括号之间的类名编号

javascript - 从 getElementsByClassName 获取括号之间的类名编号

问题描述

在我的示例中，我想知道单击了类名的哪个数字（在方括号之间）。这对于写入另一个 div 的相同类号是必要的。 

<div class="button_minus"></div>
<div class="input_test"></div>
<div class="button_minus"></div>
<div class="input_test"></div>
<div class="button_minus"></div>
<div class="input_test"></div>


$(".button_minus").click(function(){
            document.getElementsByClassname("input_test").[???].value = "test";
});

有一个选项可以给每个“button_minus”一个值参数，可以在“input_test”的方括号中给出，但这似乎效率不高。

标签： javascriptjquerygetelementsbyclassname

解决方案

从单击的元素中，您可以导航到其.next()元素以访问关联的input_testdiv：

$(".button_minus").click(function(){
  $(this).next().text('test');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button_minus">-</div>
<div class="input_test">input</div>
<div class="button_minus">-</div>
<div class="input_test">input</div>
<div class="button_minus">-</div>
<div class="input_test">input</div>

请注意，因为该元素是 a <div>，而不是类似输入的字段，所以不要使用.value(or .val()) - 使用textContentor .text()。

如果您还需要索引，请在集合中检查其索引：

const minuses = $(".button_minus");
minuses.click(function(){
  $(this).next().text('test');
  console.log(minuses.index(this));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button_minus">-</div>
<div class="input_test">input</div>
<div class="button_minus">-</div>
<div class="input_test">input</div>
<div class="button_minus">-</div>
<div class="input_test">input</div>

推荐阅读