Question

更改其中一个输入字段中的条目。单击计算机上的enter键。期望的结果是在p标签内只有相应的span标签（class =＆＃34; note＆＃34;）来显示输入结果;并非所有span标记都在此示例中演示。如何将$（＆＃34; .note＆＃34;）定义为＆＃34;此类＆＃34;。我已经尝试了一切。

＆＃13;

$(document).ready(function(){
  $("p > .test").change(function(){
    $(".note").html($(this).val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p><input type="text" class="test" value="Mickey Mouse"><span class="note"></span></p>
<p><input type="text" class="test" value="Mickey Mouse"><span class="note"></span></p>
<p><input type="text" class="test" value="Mickey Mouse"><span class="note"></span></p>

＆＃13;

Answer 1

您需要jQuery .next()功能：

$(document).ready(function(){
  $("p > .test").change(function(){
    $(this).next(".note").html($(this).val());
  });
});

Answer 2

您可以使用jQuery的许多traversal methods来定位正确的节点。一个可能的解决方案是获得this的下一个元素兄弟：

$(this).next().html(...);

另一个是获得.note父母的this孩子：

$(this).parent().children('.note').html(...);

Answer 3

$('.note')将收集该页面中该类的所有元素。

在jQuery事件处理程序中，this是发生事件的匹配选择器中的元素。然后，您可以使用元素中的遍历，一个简单的遍历为siblings()

$("p > .test").change(function(){
  $(this).siblings(".note").html($(this).val());
});

一些替代遍历

$(this).next()
$(this).parent().find('.note')
$(this).closest('p').find('.note')

的 DEMO

如何用$（this）指定一个类

3 个答案: