CODEWITHSUNDEEP
javascriptjqueryhtmleach
Teilmann
Teilmann

Reputation: 2168

Jquery each function target children of div

I am trying to target all buttons, that are children of a div with the class 'actions'.

I want my function to take the values from onclick, filter out letters and special chars, and add the numbers to an array.

The function works, when i try to target the buttons OUTSIDE the div, but not when i try to target .actions button.

Anyone have any ideas?

Fiddle: http://jsfiddle.net/Teilmann/wN79n/5/

html:

<div class="actions">
    <button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
    <button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
    <button onclick="addToCart(1339, 'something');" />
</div>

js:

var products = new Array();

jQuery('.actions button').each(function(){
    var id = jQuery(this).getAttribute('onclick');
    products.push(id.replace(/[^0-9]/g, ''));
});

alert(products);

Upvotes: 1

Views: 1664

Answers (1)

Anton
Anton

Reputation: 32581

Your html is incorrect <button/> it needs to be <button></button> and getAttribute has to be .attr()

HTML

<button onclick="str1"  ></button> <!--changed html here from <button/>-->
<button onclick="2" ></button> <!--changed html here from <button/>-->
<button onclick="addToCart(1234, 'something');"  ></button> <!--changed html here from <button/>-->

<div class="actions">
    <button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
    <button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
    <button onclick="addToCart(1339, 'something');" />
</div>

jQuery

var products = new Array();


jQuery('.actions button').each(function(){
    var id = jQuery(this).attr('onclick');
    products.push(id.replace(/[^0-9]/g, ''));
});

alert(products);

DEMO

If you don't close the button with </button> the html will automatically generate this markup

<button onclick="str1"></button>
<button onclick="2"></button>
<button onclick="addToCart(1234, 'something');">
    <div class="actions"></div>
</button>
<button onclick="addToCart(1337, 'something');">
    <div class="actions"></div>
</button>
<button onclick="addToCart(1338, 'something');">
    <div class="actions"></div>
</button>
<button onclick="addToCart(1339, 'something');"></button>

Upvotes: 5

Related Questions