CODEWITHSUNDEEP
javascriptjquery
Angel Sergio Ramírez
Angel Sergio Ramírez

Reputation: 31

Parents not working in jQuery

HTML:

<div id="comentario-info">
  <b>AngelRmz</b> hace 8 minutos
  <div id="comentario-botones" data-id="1">
    <div id="comentario-boton"  class="comentario-informar" title="Informar"></div>
    <div id="comentario-boton"  class="comentario-eliminar" title="Eliminar"></div>
    <div id="comentario-boton"  class="comentario-editar" title="Editar"></div>
    <div id="comentario-boton"  class="comentario-guardar" title="Guardar"></div>
  </div>

JavaScript:

comentarioId = $(this).parents().parent('#comentario-botones').attr("data-id");
alert(comentarioId); // return 1

Upvotes: 1

Views: 1259

Answers (2)

Ismail Farooq
Ismail Farooq

Reputation: 6837

You don't need parent() when you already use .parents(),

parents() will give you all parents elements u can simple pass its ID, Class or Attr,

Also ID must be unique.

In case you don't want to make ID unique and still want to use ID selector, I have simple solution for that.

Your ID selector must be like this $('[id="your-ID"]')

$('[id="comentario-boton"]').click(function(){
  comentarioId = $(this).parents('#comentario-botones').attr("data-id");
  alert(comentarioId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="comentario-info">
<b>AngelRmz</b> hace 8 minutos
<div id="comentario-botones" data-id="1">
  <div id="comentario-boton" class="comentario-informar" title="Informar">Informar</div>
  <div id="comentario-boton" class="comentario-eliminar" title="Eliminar">Eliminar</div>
  <div id="comentario-boton" class="comentario-editar" title="Editar">Editar</div>
  <div id="comentario-boton" class="comentario-guardar" title="Guardar">Guardar</div>
</div>

Note: This is not a good practice but this is simple hack for developer who want to use same ID for a reason.

Upvotes: 0

4b0
4b0

Reputation: 22321

Id must be unique. You use data-id. So fetch the value use data .

 $("#comentario-botones").on("click", "div", function() {
  var comentarioId = $(this).parent().data('id');;
  alert(comentarioId); // return 1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comentario-info">
  <b>AngelRmz</b> hace 8 minutos
  <div id="comentario-botones" data-id="1">
    <div id="comentario-boton1" class="comentario-informar" title="Informar">1</div>
    <div id="comentario-boton2" class="comentario-eliminar" title="Eliminar">2</div>
    <div id="comentario-boton3" class="comentario-editar" title="Editar">3</div>
    <div id="comentario-boton4" class="comentario-guardar" title="Guardar">4</div>
  </div>

Upvotes: 3

Related Questions