jquery - 在 Jquery 中的特定索引处输出 HTML

Question

我遇到了 jquery 的问题。

我想要对来自输入字段的特定数组索引进行 HTML 输出。

<tr>
<td><input type="text" name="ean[]">
<input type="text" name="serial[]">
</td>
<td class="article[]"></td>
</tr>

$('input[name^="ean"]').change(function(event) {
   var index = $('input[name^="ean"]').index( this );
   $('.article:eq(index)').html("test");
});

目的是，jquery 在输入字段 (ean) 更改后在索引(类文章)上放置特定值。

使用此代码，当前更改的索引处没有输出。

感谢您提前提供的帮助。

Answer 1

使用eq()方法或连接索引值。

$('input[name^="ean"]').change(function(event) {
   var index = $('input[name^="ean"]').index( this );
   $('.article\\[\\]').eq(index).html("test");
});

<小时/>

$('input[name^="ean"]').change(function(event) {
   var index = $('input[name^="ean"]').index( this );
   $('.article\\[\\]:eq(' + index + ')').html("test");
});

<小时/>

尽管缓存 jQuery 对象以供将来使用总是更好。

var $art = $('.article\\[\\]');
var $inp = $('input[name^="ean"]').change(function(event) {
   var index = $inp.index(this);
   $art.eq(index).html("test");
});

仅供引用:类名末尾包含 []，因此您需要将其包含在选择器中，尽管您需要转义两者，因为方括号具有特殊含义。

或者，从类名中删除 [] 并照常使用它，我个人更喜欢这样做。

<tr>
<td><input type="text" name="ean[]">
<input type="text" name="serial[]">
</td>
<td class="article"></td>
</tr>

var $art = $('.article');
var $inp = $('input[name^="ean"]').change(function(event) {
   var index = $inp.index(this);
   $art.eq(index).html("test");
});