使用jQuery查找HTML元素与按钮具有相同的数据属性值

Question

我想知道有没有办法找到页面上的HTML元素（表单，div等），它与点击按钮具有相同的data attribute value，然后将匹配的元素加载到DOM中。

$(document).ready(function() {
  $(".btn").each(function() {
    $(this).click(function() {
      var btn = $(this).attr("data-value");
      alert(btn);
      //From Where I have to go to fetch the right matching element???
      var element = $(".Form").html();
      alert(element);

    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="Form" data-value="1">
  <form action="#" method="post">
    <h4>I'm First Element</h4>
  </form>
</div>

<div class="Form" data-value="2">
  <form action="#" method="post">
    <h4>I'm Second Element</h4>
  </form>
</div>

<button type="button" class="btn" data-value="1">Find One</button>
<button type="button" class="btn" data-value="2">Find Two</button>

Answer 1

您可以通过jquery选择器选择元素。

$(this).click(function () {
                var btn = $(this).attr("data-value");
                alert(btn);
                //From Where I have to go to fetch the right matching element???
                var element = $('.Form[data-value="' + btn + '"]');
                alert(element);
            });

element是一个jquery对象。现在您可以使用此元素来满足您的要求。

Answer 2

更新您的JavaScript功能，如关注

$(document).ready(function() { 
    $(".btn").click(function() {
      var btn = $(this).attr("data-value");
      alert(btn);
      //From Where I have to go to fetch the right matching element???
      var element = $('[data-value="' + btn +'"]').html();
      alert(element);

    }); 
});