Не удается получить Jquery .each работать, чтобы работать должным образом

Question

Я пытаюсь добиться этого:

Нажмите каждую <a> кнопку и скопировать .text каждого элемента передать в текстовое поле. Код работает, но когда имеется несколько одинаковых блоков кода. он не работает хорошо. при нажатии каждой кнопки значение кнопки переходит ко всем текстовым полям, а не к полю siblings.

Вот мой HTML:

<ul> 
    <li class="ast_trigger"> 
     <a class="sldcont1 astbtn">layout1</a> 
     <a class="sldcont2 astbtn">layout2</a> 
     <a class="sldcont3 astbtn ast_active">layout3</a> 
     <input type="text" id="slides-slide_content_0" name="asteria[slides][0][slide_content_id]" value="layout3" class="full-text ast_content"> 
    </li> 

    <li class="ast_trigger"> 
     <a class="sldcont1 astbtn">layout1</a> 
     <a class="sldcont2 astbtn">layout2</a> 
     <a class="sldcont3 astbtn ast_active">layout3</a> 
     <input type="text" id="slides-slide_content_1" name="asteria[slides][1][slide_content_id]" value="layout3" class="full-text ast_content"> 
    </li> 

    <li class="ast_trigger"> 
     <a class="sldcont1 astbtn">layout1</a> 
     <a class="sldcont2 astbtn">layout2</a> 
     <a class="sldcont3 astbtn ast_active">layout3</a> 
     <input type="text" id="slides-slide_content_2" name="asteria[slides][2][slide_content_id]" value="layout3" class="full-text ast_content"> 
    </li> 
</ul> 

Вот JS:

jQuery(window).ready(function() { 
    jQuery(".ast_trigger").each(function(){ 
     jQuery(this).find('a.sldcont1').click(function(){   
      jQuery(".ast_content").val("layout1"); 
     }); 

     jQuery(this).find('a.sldcont2').click(function(){ 
      jQuery(".ast_content").val("layout2"); 
     }); 

     jQuery(this).find('a.sldcont3').click(function(){ 
      jQuery(".ast_content").val("layout3"); 
     }); 
    }); 
}); 

Вот живой jsbin пример: http://jsbin.com/IhajaX/1/edit

Благодаря

Answer 1

Вам не нужна each петля для этого. Каждый элемент уже имеет на нем класс группировки, поэтому вы можете использовать обход DOM для получения input относительно выбранного элемента a и заполнить его value.

$('.astbtn').click(function() { 
    $('.ast_content', $(this).closest('li')).val($(this).text()); 
}); 

Example fiddle

Answer 2

Этот код

jQuery(this).find('a.sldcont1').click(function(){ jQuery(".ast_content").val("layout1"); }); 

означает: Когда я нажимаю на элемент a.sldcont1, дайте ВСЕ jQuery(".ast_content") на странице layout1 значение.

Что ты хочешь сделать, я думаю,

jQuery(this).find('a.sldcont1').click(function(){ jQuery(this).parent().find(".ast_content").val("layout1"); }); 

Что означает: Когда я нажимаю на a.sldcont1 элемент, дайте мой родитель (<li class="ast_trigger"> здесь) jQuery(".ast_content") детей Layout1 значение.

Answer 3

Проблема не в вызове each(), а в функции обработчика событий. В настоящее время внутри обработчика вы выполняете поиск по всему миру для цели, к которой нужно добавить текст. Вы просто должны искать в пределах соответствующего <li> элемента, который мог бы выглядеть следующим образом:

jQuery(".ast_trigger").each(function(){ 

    jQuery(this).find('a.sldcont1').click(function(){ 
    jQuery(this).parent('.ast_trigger') 
        .find(".ast_content") 
        .val("layout1"); 
    }); 

    jQuery(this).find('a.sldcont2').click(function(){ 
    jQuery(this).parent('.ast_trigger') 
        .find(".ast_content") 
        .val("layout2"); 
    }); 

    jQuery(this).find('a.sldcont3').click(function(){ 
    jQuery(this).parent('.ast_trigger') 
        .find(".ast_content") 
        .val("layout3"); 
    }); 


}); 

http://jsbin.com/IhajaX/5/edit?html,js,output

Answer 4

Там нет смысла переднего плана "каждый" просто

jQuery(window).ready(function() { 



jQuery('a.sldcont1').click(function(){ jQuery("#slides-slide_content_0").val("layout1"); }); 

jQuery('a.sldcont2').click(function(){ jQuery("#slides-slide_content_1").val("layout2"); }); 

jQuery('a.sldcont3').click(function(){ jQuery("#slides-slide_content_2").val("layout3"); }); 




}); 

Answer 5

Попробуйте

jQuery(window).ready(function() { 
    jQuery(".ast_trigger .sldcont1").click(function(){ 
     $(this).closest('li').find(".ast_content").val("layout1"); 
    }); 
    jQuery(".ast_trigger .sldcont2").click(function(){ 
     $(this).closest('li').find(".ast_content").val("layout2"); 
    }); 
    jQuery(".ast_trigger .sldcont3").click(function(){ 
     $(this).closest('li').find(".ast_content").val("layout3"); 
    }); 
}); 

Демонстрация: Fiddle

Или

jQuery(window).ready(function() { 
    jQuery(".ast_trigger .sldcont1").click(function(){ 
     $(this).siblings(".ast_content").val("layout1"); 
    }); 
    jQuery(".ast_trigger .sldcont2").click(function(){ 
     $(this).siblings(".ast_content").val("layout2"); 
    }); 
    jQuery(".ast_trigger .sldcont3").click(function(){ 
     $(this).siblings(".ast_content").val("layout3"); 
    }); 
}); 

Демо: Fiddle

Answer 6

Попробуйте без $.each, как,

$('a.astbtn').click(function(){ 
    $(this).closest(".ast_trigger").find('input').val($(this).text()); 
}); 

Demo

Answer 7

Попробуйте это:

$('a.sldcont1').click(function(){ 
    $(this).parent().find(".ast_content").val("layout1"); 
}); 
$('a.sldcont2').click(function(){ 
    $(this).parent().find(".ast_content").val("layout2"); 
}); 
$('a.sldcont3').click(function(){ 
    $(this).parent().find(".ast_content").val("layout3"); 
});