Find a value of an input element with DOM using a jquery loop

Question

I have divs with the class 'well'. I loop all the divs to get the unique numbers and put them to an array in jquery. And that works.

But there is also an input object and I will get the value in the same loop. I will find the value on dom element. Does anybody know how to do that?

<div class="well" id=media$[unique number]>
 <div class="row">
  <div class="col-md-2">
   <div class="mediabank-input">
    <input id="caption" name="caption" class="form-control" type="text” />
   </div>
  </div>
 </div>
</div>

jquery code:

var mediaIdsArray = [];
$('#media-grid .well').each(function (index) {  
 var id = $(this).attr('id');
 var split_id = id.split("&");
 mediaIdsArray.push(split_id[1]);
});

This part is not clear "But there is also an input object and I will get the value in the same loop. I will find the value on dom element. Does anybody know how to do that?" can reword your question please? — CuriousBenjamin
– CuriousBenjamin, Commented Aug 17, 2021 at 18:15
@CuriousBenjamin I think it's a poor translation of "I want to get the value in the same loop" — Barmar
– Barmar, Commented Aug 17, 2021 at 18:22

Rory McCrossan · Accepted Answer · 2021-08-17 18:20:02Z

To achieve what you require you need to traverse the DOM from the .well element in the loop to find its child input. As you're using jQuery this can be done using find().

Also note that you need to use $ in the split() call, not &. In addition you can use map() to build the array much more simply. Finally, be careful of repeating the same #caption id if the HTML in the example is repeated, as id must be unique. Change this to a class instead.

With all that said, try this:

var mediaIdsArray = $('#media-grid .well').map((i, el) => ({
  id: el.id.split('$')[1],
  value: $(el).find('input.caption').val()
})).get();

console.log(mediaIdsArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="media-grid">
  <div class="well" id="media$1">
    <div class="row">
      <div class="col-md-2">
        <div class="mediabank-input">
          <input name="caption" class="caption form-control" type="text" value="foo" />
        </div>
      </div>
    </div>
  </div>

  <div class="well" id="media$2">
    <div class="row">
      <div class="col-md-2">
        <div class="mediabank-input">
          <input name="caption" class="caption form-control" type="text" value="bar" />
        </div>
      </div>
    </div>
  </div>

  <div class="well" id="media$3">
    <div class="row">
      <div class="col-md-2">
        <div class="mediabank-input">
          <input name="caption" class="caption form-control" type="text" value="fizz" />
        </div>
      </div>
    </div>
  </div>
</div>

David · Accepted Answer · 2021-08-17 18:18:51Z

0

Starting from the reference to this you can traverse the DOM (with methods like .find() for example) to get a reference to the <input> within that node. For example:

var value = $(this).find('input').val();

answered Aug 17, 2021 at 18:18

David

221k42 gold badges245 silver badges337 bronze badges

Comments

Charlie · Accepted Answer · 2021-08-17 18:20:48Z

0

Use the find() method to get the input element placed inside your main div.

var mediaIdsArray = [];

$('#media-grid .well').each(function (index, ele) {  

   var id = $(this).attr('id');
   var split_id = id.split("&");
   mediaIdsArray.push(split_id[1]);

   let inputVal = $(ele).find('#captions').val()
});

answered Aug 17, 2021 at 18:20

Charlie

24k12 gold badges65 silver badges96 bronze badges

Collectives™ on Stack Overflow

Find a value of an input element with DOM using a jquery loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related