CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bill Greer
Bill Greer

Reputation: 3156

How to change the css of a text input using jquery?

I have a cell with a class called OnHandClass. I have an input field inside the cell and I have added a double click event to the cell and have tried many ways to change the visibility of the closest input element. Three are listed below. What am I missing ?

 <input type="text" class="OnHandEditClass" value="1" style="display: none;">

  <td class="OnHandClass">
  1
  <input type="text" class="OnHandEditClass" value='1'>
  </td>

 $('.OnHandClass').dblclick(function (evt) {              

            $(this).next(":text").css("display", "inline");
            $(this).next("input[type='text']").show();
            $(this).closest('input').css("display", "inline");               

        });

Upvotes: 0

Views: 71

Answers (3)

Makan
Makan

Reputation: 617

If your input is inside your td as you said, use .children:

$('.OnHandClass').dblclick(function() {
    $(this).children('input').css("display", "inline");
});

.children should be the fasted way in your case.

Upvotes: 0

j08691
j08691

Reputation: 207891

Using .find() (or .children()) should do it:

$('.OnHandClass').dblclick(function (evt) {
    $(this).find(":text").show();
});

jsFiddle example

.next() searches the immediate sibling and .closest() looks up the DOM, so neither of those should have worked for you.

Upvotes: 2

Michal Kucaj
Michal Kucaj

Reputation: 691

 <input type="text" class="OnHandClass"/>
    <input type="text" class="OnHandEditClass" value="1" style="display: none;">

$('.OnHandClass').dblclick(function(evt) {
    $(this).closest('input').next().css("display", "inline");
});

Upvotes: 0

Related Questions