CODEWITHSUNDEEP
javascriptjqueryhtml
Towfiq
Towfiq

Reputation: 425

Can't get Jquery .each function to work properly

I am trying to achieve this:

Click each <a> button and copy the .text of each element pass to a text field. The code works, but when there are multiple same code block. it doesnt work well. upon clicking each button the .text value of the button is passing on to all the text fields instead of its siblings field.

Here is my 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>

Here is the 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");
        });
    });
});

Here is the live jsbin example: http://jsbin.com/IhajaX/1/edit

Thanks

Upvotes: 1

Views: 247

Answers (7)

codingrose
codingrose

Reputation: 15699

Try this:

$('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"); 
});

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try it without $.each like,

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

Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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");
    });
});

Demo: Fiddle

Or

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");
    });
});

Demo: Fiddle

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You don't need an each loop for this. Each element already has a grouping class on it, so you can use DOM traversal to get the input relative to the clicked a element and populate its value.

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

Example fiddle

Upvotes: 3

Romaindr
Romaindr

Reputation: 311

There is no use fore the "each" just do

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"); });




});

Upvotes: 1

Sirko
Sirko

Reputation: 74036

The problem is not the each() call, but the event handler function. Currently inside the handler you search globally for the target, which to add the text to. You should just search within the respective <li> element, which could look like this:

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

Upvotes: 2

OlivierH
OlivierH

Reputation: 3890

This code

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

means : When i click on a.sldcont1 element, give ALL jQuery(".ast_content") on the page layout1 value.

What you wanna do, i think, is 

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

Which means : When i click on a.sldcont1 element, give my parent (<li class="ast_trigger"> here) jQuery(".ast_content") children layout1 value.

Upvotes: 1

Related Questions