How to use Jquery selector for a div , created dynamically under for loop?

Question

Under a for loop , i am constructing div this way , adding dynamic content whereever applicable .

<div data-role="collapsible">
    <h3>Popcorn</h3>
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">
                    <label class="testtt" for="checkbox-mini-0">Small Pack 150g</label>
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col">
                    <i class="minus"></i>
                    <i class="qt">12</i>
                    <i class="plus"></i>
                </div>
                <div class="col">

                </div>
                <div class="col">
                    Rs: 150/-
                </div>
            </li>
        </ul>

    </div>
</div>

Actual code

for (var k = 0; k < responseinner[i].type.length; k++) 
{
activateUiHTML.append('<div  data-role="collapsible"><h3>' + obj.name + '</h3><div class="prd-items-detials"><ul><li class="head"><form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="' + random_number + '" data-mini="true"><label class="testtt" for="checkbox-mini-0">' + responseinner[i].type[k] + '</label></form></li><li class="prd-items-qt"><div class="col"><i class="minus"></i><i class="qt">1</i><i class="plus"></i></div><div class="col"></div><div id ="'+responseinner[i].type[k]+'" class="col">Rs: ' + responseinner[i].price[k] + '/-</div></li></ul></div></div>');
}

When i registered with the checkbox event this way , i was getting multiple values on click of checkbox . (I mean the text present for other checkboxes also present in for loop )

$(document).on("click", ".checkboxclas", function (e) {
if($(this).is(':checked'))
{      
var labelAttr = $('label').text();
alert(labelAttr);
}
}

How to return only that particular text of checkbox ??

http://learn.jquery.com/events/event-delegation/ – Arun P Johny May 30 '14 at 05:38 — Arun P Johny, May 30 '14 at 05:38
What do you mean by particular? any specific class? – Shaunak D May 30 '14 at 05:39 — Shaunak D, May 30 '14 at 05:39

score 0 · Accepted Answer · answered May 30 '14 at 05:35

0

You have to get its parent form element using closest() and the get the label using find() like this:

$(document).on("click", ".checkboxclas", function (e) {
if($(this).is(':checked'))
{      
var labelAttr = $(this).closest("form").find("label.testtt").text();
alert(labelAttr);
}
}

answered May 30 '14 at 05:35

Ehsan Sajjad

61,834
16
105
160

Working absolutely fine . – May 30 '14 at 05:37
Thank you very much , Is it possible to get the value 12(quantity) (12) ?? ?? – May 30 '14 at 05:38
yes like this:``$(this).closest("ul").find("i.qt").text()`` – Ehsan Sajjad May 30 '14 at 05:40
You are really master of Jquery . thank you very much . – May 30 '14 at 05:42
thanks for the complement but i am also learning still..:) – Ehsan Sajjad May 30 '14 at 05:44
Hi , Similarly i was trying to get the Amount also (Rs: 150/-) (in question ) , so when i tried using alert($(this).closest("ul").find("div").text()); , i was getting 1Rs : 150 , can you please tell me why it is appending 1Rs : to it ?? – May 30 '14 at 06:30
there are many divs inside ul you can distinguish price div by addind class on price divs and then get using ``find("div.price")`` – Ehsan Sajjad May 30 '14 at 06:33
the problem is that i cannot add class , as the css guy will not allow . – May 30 '14 at 06:34
No problem , i can manage that , thnaks for your time . – May 30 '14 at 06:36
currently it is last div if it will always be at last then try:``$(this).closest("ul").find("div:last")`` – Ehsan Sajjad May 30 '14 at 06:37
ya , this also worked :) , i will stick to this as css will not get chnaged . – May 30 '14 at 06:44
and finally why the div h3 tag text is not working ?? i tried number of thiings like , $(this).find('h3').text(); $("div.h3").text()); , but none worked . – May 30 '14 at 06:49
``$(this).closest("h3")`` – Ehsan Sajjad May 30 '14 at 06:52
I am getting an array [Object,Object] with $(this).closest("h3") – May 30 '14 at 06:59
that shoud work but you can give a try with this as well: ``$(this).closest('div["data-role="collapsible"]').find("h3")`` – Ehsan Sajjad May 30 '14 at 07:04
GETTING IN CONSOLE , Uncaught Error: Syntax error, unrecognized expression: div["data-role="collapsible"] – May 30 '14 at 07:11
If i add a class to that div will it work ?? – May 30 '14 at 07:16
I mean i added a class to it as mine , and tried this way alert($(this).find("div.mine.h3").text()); – May 30 '14 at 07:17
its working see :http://jsfiddle.net/LpFj6/ – Ehsan Sajjad May 30 '14 at 07:23
yes it is working now . – May 30 '14 at 07:29

score 0 · Answer 2 · answered May 30 '14 at 05:36

0

Try this :

$(document).on("click", ".checkboxclas", function (e) {
    if($(this).is(':checked')) {
        var labelAttr = $('label[for='+$(this).attr('name')+']').text();
        alert(labelAttr);
    }
});

answered May 30 '14 at 05:36

Tanatos

1,857
1
13
12

How to use Jquery selector for a div , created dynamically under for loop?

2 Answers2