CODEWITHSUNDEEP
jqueryinputjquery-selectors
Boxiom
Boxiom

Reputation: 2305

Find next input field of specific class

I have several divs with two input fields each, like this:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

So let's say I have the inputfield with id second_1, and assign some value to it:

$("#second_1").val("Hello");

How can I find the next input field with the class "first"? Keep in mind that I don't know its ID, it's not necessarily first_2.

So in other words, I want to assign a value to first_2 as well, but without knowing its ID.

Upvotes: 1

Views: 5277

Answers (4)

Mariano Desanze
Mariano Desanze

Reputation: 8163

Using parents().next().find(...).first() you can then find the next input with class"first" no matter how deep in the HTML tree is, nor the class or type of your parent elements.

$('#second_1').parents().next().find(".first").first().val("Hello");


$('#second_1')
  .val("Starting here")
  .parents().next().find(".first").first().val("Hello");
div { padding: 2px; }
#wrapper { border: 1px grey solid; }
.subcontent { border: 1px grey dashed; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_1" />
        <input type="text" class="second" id="second_1">
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_2" />
        <input type="text" class="second" id="second_2" />
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
        <input type="text" class="first" id="first_3" />
        <input type="text" class="second" id="second_3" />
    </div>
  </div>
  <div class="content">
    <input type="text" class="first" id="first_4" />
  </div>
</div>
<div class="content">
  <input type="text" class="first" id="first_5" />
  <input type="text" class="second" id="second_5" />
</div>

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30607

You can do this with a top-down approach. Approach it from parent containers using :has and nextAll()

$('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first');


console.log($('.content:has(#first_1)').nextAll('.content:has(.first)').find('.first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>
</div>

Upvotes: 1

Reactgular
Reactgular

Reputation: 54821

I think this is what you want.

var nextFirst = $("#second_1").closest('content').next().find('.first');

Use closest(..).next() to get the next row of inputs.

Upvotes: 4

Saeed M.Aghdam
Saeed M.Aghdam

Reputation: 46

Try this code:

var myInputs = document.getElementsByClassName("first");
for (var i = 0; i < myInputs.length; ++i) {
    var item = myInputs[i];  
    item.value = 'your value';
}


            var myInputs = document.getElementsByClassName("first");
			for (var i = 0; i < myInputs.length; ++i) {
				var item = myInputs[i];  
				item.value = 'your value';
			}
    <div id="wrapper">
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_1" />
            <input type="text" class="second" id="second_1" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            <input type="text" class="first" id="first_2" />
            <input type="text" class="second" id="second_2" />
        </div>
    </div>

Upvotes: 0

Related Questions