Question

我正在尝试将一个元素设置为与JQuery中的兄弟元素具有相同的值。

我有一个包含许多字段的表格，当我点击“编辑”按钮时，我想将标签的值复制到它的邻近输入字段：

<table style="width:90%">
  <tr>
    <td>Start</td>
    <td>
       <span ID="lblSprintStart" class="staticField">01/01/2001</span>
       <input class="editableField" id="sprintStart" />
    </td>
   </tr>
   <tr>
     <td>End</td>
     <td>
       <span ID="lblSprintEnd" class="staticField">02/02/2002</span>
       <input class="editableField" id="sprintEnd" />
     </td>
    </tr>
 </table>
<button id="editButton">Edit</button>

我可以通过ID定位每个元素来实现：

$(function () {
 $("#editButton")
  .click(function (event) {
   event.preventDefault();
   editMode();
 }); 
});

function editMode() {     
  $("#sprintStart").val($("#sprintStart").siblings(".staticField").html());
}

但我希望按类进行，以便更新所有字段。如果我更改函数以使用$（this）选择器并按类进行，则它不起作用：

function editMode() {     
   $(".editableField").val($(this).siblings(".staticField").html());
}

http://jsfiddle.net/QQLvX/1/

Answer 1

您可以使用.val( function(index, value) )

将值返回到set的函数。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。

代码

$(".editableField").val(function(){
    return $(this).siblings(".staticField").html();
});

DEMO

Answer 2

使用.each()

$('.editableField').each(function(){
    $(this).val($(this).siblings(".staticField").html());
});

如何在函数中获取JQuery中的元素兄弟？

2 个答案: