CODEWITHSUNDEEP
jquery
Nico van Wijk
Nico van Wijk

Reputation: 269

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

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

Upvotes: 0

Views: 467

Answers (3)

Charlie
Charlie

Reputation: 23778

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

David
David

Reputation: 218818

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

Upvotes: 0

Related Questions