我们如何 select 使用此关键字在 div 中输入元素

Question

下面的 HTML 代码是从 PHP 生成的，我想 select 输入元素并使它们可见。由于 HTML 代码重复出现，我想使用 this 关键字和 select 输入元素。

我尝试在 jquery 中使用 parent 方法，但无法将父 class 名称连接为 selector。有人可以帮忙吗？

$(document).on('click', '.edit', function() {
  var x = $(this).parent();
  $(x + '.username').show(); // it is showing error
  $("this .password").show();
  $("this .email").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">ajay aaa asss@s.ock
  <span class="delete" data-id="30">delete</span>
  <span class="edit" data-id="30">edit</span>
  <input type="text" style="display:none" class="username">
  <input type="text" class="password" style="display:none">
  <input type="text" class="email" style="display:none">

</div>

Answer 1

您可以使用 $('.selector', parent) 到 select children 和 jQuery 如下

$(document).on('click', '.edit', function() {
  var x = $(this).parent();
  $('.username', x).show();
  $(".password", x).show();
  $(".email", x).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">ajay aaa asss@s.ock
  <span class="delete" data-id="30">delete</span>
  <span class="edit" data-id="30">edit</span>
  <input type="text" style="display:none" class="username">
  <input type="text" class="password" style="display:none">
  <input type="text" class="email" style="display:none">

</div>

我们如何 select 使用此关键字在 div 中输入元素

How can we select input element in div using this keyword

jquery

this

selector