How do I get the value of a child element from a div

Question

How do I get the value of a child element from a div

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hi I would like to know how to extract the value of a <input id="tipo"/> child from a <div class="box-header"> these elements of DOM are repeated but not their values, the values are used to set a local storage, there is someone who can help me with a suggestion, I am interested in learning to refer to the children elements with jquery, the structure is as follows

<script>
$(document).ready(function () {
  $('.box-header').click(function () {
    alert("clickeed")
    var tipo = $('b').parent('.box-header').val();
    localStorage.setItem("tipoDocto", tipo);
    //var tipo = $('#tipo').val();
    // 
    // localStorage.setItem("tipo", tipo);
  });
});
</script>

<div id="este"  class="box-header" data-widget="collapse" >
  <img id="lupa" src="css/galeria/zoom.png" 
    style="float:left; width:14px;height:18px; margin-left:2%;margin-top: 3%;" />

  <h2 class="box-title" display="block" 
    style="float:left; margin-left:2%;"> {{item.documentos}} </h2>

  <img id="change" src="css/galeria/down.png" 
    style="float:right; width:7%;margin-right: 5%; margin-top: 4%;" />

  <input type="text" id="tipo" readonly>{{item.clave}}</>
  <div class="box-tools pull-right">
  </div>
</div>

javascript jquery angular dom

asked by emanuelle 23.07.2018 в 21:42

source

2 answers

0

You may want to do something like this:

var id = $('input').attr('id');

an example:

var id = $('input').attr('id');
alert(id);

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ejemplo</title>
</head>  
<body>

<div><!-- el padre -->
  
  <!-- tu quieres tomar el id de este hijo del padre div de arriba-->
<input type='text' id='hello' />
  </div>
  
<script src="https://code.jquery.com/jquery-git.js"></script>

</body>
</html>

answered by 23.07.2018 в 22:14

I can not get 1 object from my database, problem with SQLite and PreparedStatement Problem with subquery

score 1 · Accepted Answer

If the elements are repeated, you should not have ID's, instead of classes, then to find the child element, just use find() with the selector of the class that belongs to input (type) .

You should change the id for the elements #lupa , #change , #este and #tipo , you should change it to classes, because as you mention are elements that are repeated.

$(function() {
  $('.box-header').click(function () {
    //this hace referencia al div , luego buscamos el elemento 
    // con la clase tipo y obtenemos su valor
    let tipo = $(this).find('.tipo').val();
    console.log(tipo);
    //asignas al storage
    //localStorage.setItem("tipoDocto", tipo);
  });
});

.box-header{
  background: #ccc;
  margin:2em;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-header" data-widget="collapse" >

    <img class="lupa" src="css/galeria/zoom.png" style="float:left; width:14px;height:18px; margin-left:2%;margin-top: 3%;" />

    <h2 class="box-title" display="block" style="float:left; margin-left:2%;"> {{item.documentos}} </h2>
    <img class="change" src="css/galeria/down.png" style="float:right; width:7%;margin-right: 5%; margin-top: 4%;" />
    <input type="text" class="tipo" readonly value="tipo1">
    <div class="box-tools pull-right">
    </div>
</div>
<div class="box-header" data-widget="collapse" >

    <img class="lupa" src="css/galeria/zoom.png" style="float:left; width:14px;height:18px; margin-left:2%;margin-top: 3%;" />

    <h2 class="box-title" display="block" style="float:left; margin-left:2%;"> {{item.documentos}} </h2>
    <img class="change" src="css/galeria/down.png" style="float:right; width:7%;margin-right: 5%; margin-top: 4%;" />
    <input type="text" class="tipo" readonly value="tipo2">
    <div class="box-tools pull-right">
    </div>
</div>