puzzledGalore
puzzledGalore

Reputation: 33

jQuery function inside each only returns the value from last element

I'm trying to pass html elements text values with a specific class as a parameterto a function inside an each function.

The output returns only the last text value passed.

I would like to assign each text value to the function contained within an element right next to it, so it returns the value as a parameter for the function of every different block of html code.

jQuery code :

$(".optin-holder").each(function(index,obj) {   

    $(this).html("<div class='contentOptin'>" +  new Optin($(this).next().text()) + "</div><br/><br/>");

  //$(this).html("<div class='contentOptin'>" + $(this).next().text() + "</div><br/><br/>");                                        

}); 

function Optin(promoNumber){    

var promo = promoNumber;

var content = '<input onclick="javascript:saveActivity('+promo+')"  type="button" name="logOptin" value="PARTICIPAR" class="btn btnParticipate" />';

$(".contentOptin").html(content);

}

HTML :

<div class="offerBoxAll">
    <div class="optin-holder">
        <div class="contentOptin">
            <input class="btn btnParticipate"  onclick="javascript:saveActivity(1284)" name="logOptin" value="PARTICIPAR" type="button">
        </div>
    </div>
<div class="test">1283</div>
</div>


<div class="offerBoxAll">
    <div class="optin-holder">
            <div class="contentOptin">
                <input class="btn btnParticipate" onclick="javascript:saveActivity(1284)" name="logOptin" value="PARTICIPAR" type="button">
            </div>
    </div>
    <div class="test">1284</div>
</div>

As you can see it is passing just the latest value to each iteration.

I need to pass the value of the .test class right next to every .contentOptin class.

The commented line gives me the value I need for every iteration but is not inside the function as parameter. The Optin(param) function appends some code which is passing the value of .test class text to saveActivity(param) function as a parameter within the element with .contentOptin class.

jsfiddle example

Upvotes: 0

Views: 492

Answers (2)

puzzledGalore
puzzledGalore

Reputation: 33

Iterate the element with value inside function and set a conditional statement within 'each' to check if the given value for this element is equal to the argument passed to the function. jsfiddle.net/puzzledGalore/6sy7badn/

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

Replace $(this).next().text() with $(this).find(".test").text().

$(this).find(".test").text() will find the value of div having test class for each optin-holder div.

Js change

$(".optin-holder").each(function(index,obj) {                               
    $(this).html("<div class='contentOptin'>" + Optin($(this).find(".test").text()) + "</div><br/><br/>");
    // $(this).html("<div class='contentOptin'>" + $(this).next().text() + "</div><br/><br/>");                                     

});

Upvotes: 1

Related Questions