使用jQuery获取兄弟元素

Question

我正在尝试使下面的a标签从选择框中获取值并将其粘贴到输入框中。

<td class="ms-formbody" style="width:385px">
    <input name="ctl00$PlaceHolderMain$dlFields$ctl00$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl00_txtSource" class="ms-input" />
    <select name="ctl00$PlaceHolderMain$dlFields$ctl00$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields" class="ms-input">
        <option value="Some Field Name 1">Some Field Name 1</option>
        <option value="Some Field Name 2">Some Field Name 2</option>
        <option value="Some Field Name 3">Some Field Name 3</option>
        <option value="Some Field Name 4">Some Field Name 4</option>
    </select>
    <a href="javascript: appendField();">append</a>
</td>

我似乎无法弄清楚如何获取同级元素。我尝试了$(this).siblings("input").val()，但出现Web页面错误'parentNode.firstChild' is null or not an object。

尝试了$(this).prev().prev().val()，但返回undefined。有什么最好的方法来获取这些元素吗？

谢谢， David

- David Lozzi

Answer 1

你的问题源于你的方法。直接调用函数不会产生你期望的结果，也就是得到代表<a>标签的jQuery对象。与其直接调用函数，不如注册一个函数来响应<a>上的click事件。

首先，给你的链接添加一个id：

<a href="#" id="appendSelect">append</a>

然后使用jQuery选择器来替换你的appendField()函数，使其响应click事件。

$(document).ready(function() {
  $("#appendSelect").click(function() {
    var $thatInput = $(this).siblings("input");
    var $selectValue = $(this).siblings("select").val();
    $thatInput.val($selectValue);
  })
});

采用此方法，$(this) 将代表你的<a>标签。

你可以通过使用 JavaScript 调试控制台（Chrome 默认具备，Firefox 可使用 Firebug 插件）深入了解我所说的内容。尝试再次使用原始函数方法，并添加 console.log($(this)); 语句。你应该会看到它打印出一个 DOMWindow 对象。现在将相同的日志语句放入 click 函数中，你会看到 jQuery 给你提供了一个 $(this) 来代表你预期的对象。

- Tim Bielawa

---

谢谢你的帮助，这真的很有用。跟着你的步伐，我用 div 包装了我的表格，然后选取那个元素，效果非常好。$(document).ready(function () { $("#myList a").click(function () {
var $selectValue = $(this).siblings("select").val(); var $thatInput = $(this).siblings("input"); $thatInput.val($selectValue); }) }); - David Lozzi

Answer 2

尝试:

$(this).parent().children("input:first").val();

- Darko

---

没有起作用，请参见上面的帖子，我认为这是我的方法存在问题。 - David Lozzi

Answer 3

appendfield方法无法访问$(this)。

以下是可工作的代码： http://jsfiddle.net/NBf4d/2/

- krishna

---

JSFiddle太棒了！我稍微修改了一下代码以适应我的环境。我忘了提到它是一个重复的行，并且我使用了其他JQuery示例进行更新。还在微调中。 - David Lozzi

Answer 4

这仅适用于这些ID，但您可以轻松更改它们：

$('#ctl00_PlaceHolderMain_dlFields_ctl00_txtSource').val($('#ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields').val());

- Andrew Marshall

Answer 5

试试这个...

$(this).parent().find('input:first').val(selectedOptionValue);

- Vivek

---

没有起作用，请参见上面的先前帖子，我认为这是我的方法存在问题。 - David Lozzi

Answer 6

使用.children()或.find()

.children()只查找父元素的直接子元素，而.find()会查找父元素下的所有层级。

$('.ms-formbody').find('select').val();

- Justin808