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

Question

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");               

        });

your input has class of OnHandEditClass, not OnHandClass. — PlantTheIdea
– PlantTheIdea, Commented Mar 25, 2015 at 18:45
@PlantTheIdea - OP said the "cell" has the class OnHandClass. Presumably the input is in a table cell however the OP failed to include that code if it is. — j08691
– j08691, Commented Mar 25, 2015 at 18:47
@j08691 - ah, so they just provided an incomplete codebase for the question. my bad. — PlantTheIdea
– PlantTheIdea, Commented Mar 25, 2015 at 18:48

j08691 · Accepted Answer · 2015-03-25 19:03:55Z

2

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.

answered Mar 25, 2015 at 19:03

j08691

208k33 gold badges269 silver badges281 bronze badges

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

Comments

Michal Kucaj · Accepted Answer · 2015-03-25 18:46:05Z

0

 <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");
});

answered Mar 25, 2015 at 18:46

Michal Kucaj

6916 silver badges15 bronze badges

1 Comment

Bill Greer Over a year ago

Mike. Please see my edit above. My OnHandClass is on a table cell.

Makan · Accepted Answer · 2015-03-25 19:16:39Z

0

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.

answered Mar 25, 2015 at 19:16

Makan

6178 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related