Jquery dynamically adding classes

Question

Hi im working with a mask plugin and I need to add a class to an input level element, however I can't seem to target it correctly, and .next() simply goes on to the next level <td>.

Here is a Jfiddle I'm working on as you can see I need the phone_us part to be added dynamically to the class attribute because im masking it<input type="text" class="" name="" value="">

Javascript

$(document).ready(function(){

$('td').each(function (index) {
   var divHTML =  $(this).text();  

if(divHTML.indexOf("Phone") >= 0)
     {
    $(this).next().css('background-color', 'blue');       
    $(this).next().closest('input').addClass('phone_us');
    $('.phone_us').mask('(999) 999-9999');
     }
});
});

HTML

<td class="label">Phone #</td>
<td class="field"><input type="text" class="label_box" name="" value=""></td>

Ram · Accepted Answer · 2013-06-02 05:33:25Z

3

.closest() selects the closest matching parent/grandparent... of the selected element:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Use find or children method instead:

$('td:contains("Phone")').next()
                         .css('background-color', 'blue')       
                         .find('input')
                         .addClass('phone_us')
                         .mask('(999) 999-9999');

http://jsfiddle.net/dyNZg/

edited Jun 2, 2013 at 5:33

answered Jun 2, 2013 at 5:26

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Undermine2k Over a year ago

I see. Is next() any different then each() is this context?

Ram Over a year ago

@Undermine2k No, there is no difference, it selects the very next sibling of the selected elements.

Collectives™ on Stack Overflow

Jquery dynamically adding classes

Javascript

HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript

HTML

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related