jQuery next() with $(this)

Question

I have a form with repeating sets of elements.

When a select with class credit_req_select changes I want to show/hide and possibly clear only the next text input with class credit_line_text.

The change() func below is not finding the textfields and I think it must have to do with how I am using $(this).

What is the correct way to grab these textfields?

My HTML is

<p class="file_info">*Credit Required: 
    <select name='default_credit_requirements' id='default_credit_requirements' class="credit_req_select">
<option></option>
<option value='1' selected>Do not include</option>
<option value='2' >Include if able</option>
<option value='3' >Must include</option>
</select>
    </p>
    <p class="file_info">
      <label>*Credit Line:
        <input  type="text" name="default_credit_line" id="default_credit_line" class="credit_line_text" value="" />
      </label>
    </p>

My function looks like this, same as the answer here Jquery next adjacent selector with $(this)

$('.credit_req_select').change(function() {
    if(this.value > 1) {    
        $(this).next(".credit_line_text").show();
        console.log($(this).next(".credit_line_text").attr('id'));
    } else {
        $(this).next(".credit_line_text").val('');
        $(this).next(".credit_line_text").hide();   
    }
});

I have also tried this answer jquery next() returning nothing

$('.credit_req_select').change(function() {
    if(this.value > 1) {    
        $(this).nextUntil(".credit_line_text").show();
        console.log($(this).nextUntil(".credit_line_text").attr('id'));
    } else {
        $(this).nextUntil(".credit_line_text").val('');
        $(this).nextUntil(".credit_line_text").hide();  
    }
});

Also tried assigning this to a var per jQuery $(this).next() not working as expected

.next only looks at the immediately next sibling. In your case, you're working with 2nd cousins. — Kevin B, May 28 '13 at 20:58
The [`.next()` method](http://api.jquery.com/next/) selects only the _immediately following sibling element_ if it matches the selector you provide, or it selects nothing if the next element doesn't match. `.next()` does _not_ search down through the DOM looking for a matching element. The `.nextUntil()` method has more of a search vibe about it, but still it deals only with following _siblings._ — nnnnnn, May 28 '13 at 20:58

Adil Shaikh · Accepted Answer · 2013-05-28T21:07:57.397

2

Try this -

$(this).closest('p.file_info').next().find(".credit_line_text")

As your input is already having an id default_credit_line and as Id's are supposed to be unique, you can use this.

$('#default_credit_line').val("");

edited May 28 '13 at 21:07

answered May 28 '13 at 20:57

Adil Shaikh

44,509
17
89
111

1

He should probably take that ID off. I don't think he's keeping them unique. – Farzher May 28 '13 at 21:09
I most certainly am keeping them unique. The subsequent fields are created via a loop in PHP and have these attributes `name="credit_line=$i?>" id="credit_line=$i?>" class="required credit_line_text"` – jerrygarciuh May 28 '13 at 22:07

score 0 · Answer 2 · answered May 28 '13 at 21:10

0

What you should really do is wrap each repeating set of elements in something. For example a div with the class element. Then your select query will be much easier to read.

$(this).closest('.element').find(".credit_line_text")

answered May 28 '13 at 21:10

Farzher

13,934
21
69
100

jQuery next() with $(this)

2 Answers2