通过单击div-jQuery填充输入

我想通过点击包含表格所需内容的div来自动填写表格。

我的div –

 
 
Sahar Raj
 
Address.
 
City
 
State
 
Pin
 
9876543210
 
  

表格 –

     State1 State2    

知道怎么做到这一点？ 谢谢

Answer 1

您可以使用map和each方法的混合来使其工作。

请记住，订单对于使其正常运行非常重要。 如果您有偶然的顺序，您可以使用data- *属性来存储相关的字段信息，然后填充它。

 $(function () { $('div.ab').click(function() { var data = $('.ab li').map(function () { return this.innerHTML; // or return $(this).text(); }).get(); $('input').each(function (i) { this.value = data[i]; // or $(this).val(data[i]); }); }); }); 

检查小提琴

UPDATE

我已经使用data- *属性来建立元素之间的关系，因为它们不再是同一类型。 这将映射到该字段的name属性。 还将容器中的字段包含在内，因为它们更容易选择。

HTML

 
 
 
Sahar Raj
 
Address.
 
City
 
State2
 
Pin
 
9876543210
 
 
 
     State1 State2     

JS

 $(function () { $('div.ab').click(function () { $('.container').children().each(function() { // Get the corresponding key value from li. var $this = $(this), key = $this.attr('name'); // Find the li with that key var txt = $('.ab li[data-key="'+ key +'"]').text(); $this.val(txt); }); }); }); 

检查数据小提琴

Answer 2

试试这个：

 $(document).ready(function () { $(".ab").on("click", function () { $(".ab ul >li").each(function (x, value) { var text = $(this).html(); var dom = $("input,textarea,select").get(x); $(dom).val(text); }); }) }); 

JSFIDDLE DEMO

Answer 3

我猜你的input都是一个form ，并且ul始终是正确的顺序。 如果是这样，您可以使用：

 $(function(){ $('div.ab').on('click',function(){ $('form input').each(function(index){ $(this).val($('div.ab ul li:eq(' + index + ')').html()); }); }); }); 

Answer 4

您可以为每个

添加id并绑定点击，例如名称：

HTML：

 
Sahar Raj 

jQuery的：

 $('.ab').on('click', function(){ $('input[name="name"]').val($('#name').html()); }); 

Answer 5

 var counter = 0; $("#clickme").click(function() { $("#list li").each(function() { var text = $(this).text(); $("input:eq(" + counter + ")").val(text); counter++; }); }); 

http://jsfiddle.net/PgYjH/1/

Answer 6

你可以用它

 $('div ul li').click(function () { var divIndex = $(this).index(); var divText = $(this).text(); $('input').each(function () { if ($(this).index() == divIndex) { $(this).prop('value', divText); } }); }); 

点击一个

，它将读取其索引位置并获取其值/文本。 然后查找具有相同索引的并为其赋予值/文本。

最好的方法是在输入和li上都有data-属性，以避免在混淆顺序时出现问题。

在这里演示