优化jQuery选择器以定位正确的输入元素

Question

我有一个函数，它将select中的值写入输入。我使用的是活的（“变化”，功能来触发此。

if ($(this).val() == 'MyValue') {$(".my_input").val(VarValue);} 

这工作得很好，但我需要的目标最接近的输入，所以它只能写入到一个输入，而不是所有的人。我有什么下面试着不起作用。如果可以的话，请帮助表示感谢。

if ($(this).val() == 'MyValue') {$(this).closest(".my_input").val(VarValue);} 

UPDATE

这里是对的jsfiddle一个链接，请注意，该功能没有在这里工作，但你可以看到我的html。http://jsfiddle.net/clintongreen/9x6kv/

Answer 1

你的小提琴，但它的作品：Click here

您的问题与您的js - 更改：

$(".clone_dept").live("change", function() { //<-- not really sure why live isn't working 
    if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);} 
    if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_1);} 
    if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_1);} 
    if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_1);} 
    if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_1);} 
    }).change(); // trigger once if needed 
}); // <-- This shouldnt be here 

到：

$(".clone_dept").change(function() { 
    if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);} 
    if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_2);} 
    if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_3);} 
    if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_4);} 
    if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_5);} 
}).change(); // trigger once if needed 

虽然这并不能真正解决如何选择最接近的输入。在你的小提琴的情况下，它是使用该类的唯一元素。如果此行结构将被复制并重用，请使用此选项来选择正确的输入。

if($(this).val() == 'Dept #1') {$(this).parent().next("td").children(".clone_attendees").val(dept_1);} 

编辑： 更好的是，使用一个数组指派权值，而不是具有5行，如果statments。

var dept = ["Person #1, Person #2, Person #3, Person #4, Person #5","Person #6, Person #7, Person #8, Person #9, Person #10","Finance Persons","IT Persons","Marketing Persons"]; 

将值添加到的选项标签

<option value=0>Dept #1</option> 

然后

$(".clone_dept").change(function() { 
    if($(this).val() == 'Dept #1') { 
     $(this).parent() 
     .next("td") 
     .children(".clone_attendees") 
     .val(dept[$(this).val()]) 
    } 
}).change(); // trigger once if needed 

Answer 2

如果你肯定至少有一个，你可以尝试

if ($(this).val() == 'MyValue') {$(".my_input").eq(0).val(VarValue);} 

，但未通过集中的第一，但它不具有的“最近”任何想法

第一兄弟？尝试

if ($(this).val() == 'MyValue') {$(this).siblings(".my_input").eq(0).val(VarValue);} 

但是，无论如何，这将得到任何出现在您的反应。完全取决于什么 '最近' 意味着

Answer 3

假设输入是在DOM未来，这应该工作：

if ($(this).val() == 'MyValue') {$(this).next().val(VarValue);} 

Answer 4

UPDATE：终极密码（如果有人需要）

$(document).ready(function(){ 
var $theme = $("#clonned").clone(); 
// The Function in Question 
var dept_1 = "Person #1, Person #2, Person #3, Person #4, Person #5"; 
var dept_2 = "Person #6, Person #7, Person #8, Person #9, Person #10"; 
var dept_3 = "Finance Persons"; 
var dept_4 = "IT Persons"; 
var dept_5 = "Marketing Persons"; 

$(".clone_dept").live("change", function() { 
    if ($(this).val() == 'Dept #1') { 
     $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_1); 
    } 
    if ($(this).val() == 'Dept #2') { 
     $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_2); 
    } 
    if ($(this).val() == 'Dept #3') { 
     $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_3); 
    } 
    if ($(this).val() == 'Dept #4') { 
     $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_4); 
    } 
    if ($(this).val() == 'Dept #5') { 
     $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_5); 
    } 
}).change(); // trigger once if needed 
// Clone Function 
$(".tr_clone_add").live('click', function() { 
    var $newone = $theme.clone(); 
    $newone.attr("id", "clonned"+Math.floor(Math.random()*11)); 
    $newone.appendTo('.table_clone'); 
}); 
});