使用 jQuery，选择下一个 框并更改其值

Question

根据标题，除了选择正确的框之外，我可以做所有事情。

页面布局基本上是几个链接（class =“class”），每个链接（class =“games”）旁边有一个选择框（选择框和链接之间有一些元素）。我试图仅更改紧邻被单击链接旁边的选择框的值。

* 编辑*

这是一个小提琴，其中包含我正在使用的 HTML 的更好示例： http ://jsfiddle.net/ynSeZ/9/

--- 我已经尝试了所有建议的答案，但没有一个有效。感谢迄今为止所做的一切努力！ ---

这就是我到目前为止所拥有的..当我删除最接近的()部分时，它可以工作..但它改变了每个选择框的值，而不仅仅是最接近链接的方式。

提前致谢， 菲尔

Answer 1

这是你的答案。使用 siblings 而不是 closest：

$('.class').click(function() {

    var objectID = $(this).attr('objectID');

    $($(this).siblings('.games').get(0)).val(objectID).attr('selected', true);

});

小提琴：http://jsfiddle.net/maniator/ynSeZ/3/

现在我想了一下，上面的答案可能不正确。您必须实现一些东西才能获取最接近的 select 元素。上面的代码的作用是获取页面上的第一个选择元素，不一定是最接近 a 标记的

---

UPDATE

这是基于您最新的小提琴的答案：

$('.pick_team').click(function() {

    var objectID = $(this).attr('team_id');

    var select_object = $('select', $(this).parent().parent());

    select_object.val(objectID)
});

Fiddle ： http://jsfiddle.net/maniator/ynSeZ/12/

Answer 2

您应该更改 HTML，以便被点击的链接只有一个“同级”选择元素。像这样：

...
<div class="container">
    <a href="#" class="class" ... >Value 1</a>
    <a href="#" class="class" ... >Value 2</a>
    <select>
        <option>Foo</option>
        ...
    </select>
</div>

然后在 Javascript 中执行此操作以获得正确的选择元素：

$(this).sibling("select")

其中 this 是被单击的链接。

closest 函数有点误导。它找到与给定选择器匹配的元素的最近祖先。

Answer 3

是时候来一个好的老式 while 循环了：

$('.class').click(function() {
    $next = $(this).next();

    while ($next.prop('tagName') !== 'SELECT' && $next.size() > 0)
    {
        $next = $next.next();
    }

    if ($next.prop('tagName') === 'SELECT')
    {
        $next.val($(this).attr('objectID'));
    }
});

jsFiddle: http://jsfiddle。 net/cM4B5/3/

编辑：jsFiddle 中的轻微拼写错误导致第二个链接无法工作。已更新。

Answer 4

也许是这样的？

已更新
这将抓取同一行中的选择框并将值设置为单击链接的 team_id

$('.pick_team').click(function() {
     var val = $(this).attr('team_id'); // grab the team id - we'll use this to determine the selected option in the select box
    //alert(val); // debugging
    $(this).closest('tr').find('select option[value="'+val+'"]').attr("selected","selected");

});