在jQuery中为同一类选择器分配不同的值

assigning different values to the same class selector in jQuery

本文关键字:分配 一类 选择器 jQuery      更新时间:2023-09-26

我不确定在这里使用什么术语,但有没有一种方法可以在按类选择多个不同元素时为它们分配不同的值?在下面的代码中,我希望用类为"value"的相邻(表亲)输入元素的值填充所有class="out"的元素。(事实上,这更复杂,但这是我的简化问题)。

<tr>
   <div id="samp1">
     <td>Sample 1</td>
     <td><input class="value" type="number" value="100"></td>
     <td><span class="out"></span></td>
   </div>
</tr>
<tr>
   <div id="samp2">
     <td>Sample 2</td>
     <td><input class="value" type="number" value="200"></td>
     <td><span class="out"></span></td>
   </div>
</tr>

我可以通过以下方式获得表亲的价值:

$('.out').closest('div').find('.value').val();

但我不知道如何将这些值相对地分配给每个元素,而不让多个元素的值相同。。。例如:

$('.out').html($('.out').closest('div').find('.value').val());

给了我一个值,但它将文档中的第一个值(在本例中,是#samp1中输入的值)分配给所有跨度,包括#samp2中的跨度。

我觉得我在寻找类似的东西

$('.out').html($(this).closest('div').find('.value').val());

但这显然不起作用
谢谢你的帮助。

使用jQuery.each迭代所有.out元素。

$('.out').each(function(){
  $(this).html($(this).closest('div').find('.value').val());
});

http://api.jquery.com/jQuery.each/

描述:一个通用迭代器函数,可用于无缝地迭代对象和数组。数组和类数组具有length属性的对象(例如函数的arguments对象)按数字索引从0到长度-1进行迭代。其他对象是通过其命名属性进行迭代。

$('.out').each(function(index, elem) {
    var out = $(elem);
    out.html(out.parent().parent().find('.value').val());
});
$('.out').each(function(){
   $(this).html( $(this).closest('tr').find('.value').val() );
});

另一件事是你的HTML无效。

您不能将<div>放在<tr>标记

之间