Skip to main content
se añadieron 1406 caracteres en el cuerpo
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

El problema es el .parents() que devuelve una lista con todos los padres.

Con el siguiente snippet se puede ver el problema, se colorean los hermanos de esos .parents() cuando solo te interesa que se coloreen los que están a su nivel.

$("button").click(function(){
    $(".row").css("background-color","white")
    console.log("Parent ID:"+$(this).parent('.row').attr("id"));
  $(this).parents(".row").siblings('.row').css("background-color","yellow")
});
.row {
  width: 100%;
  border: 1px solid black;
}

.row > .row {
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="song" class="row">
    Grupo 1
    <div id="desc" class="row">
      Hermano - grupo 1
    </div>
    <div id="votes" class="row">
      Hermano - grupo 1
      <button>
        CLICK
      </button>
    </div>
  </div>
  
  <div id="song2" class="row">
    Grupo 2
    <div id="desc2" class="row">
      Hermano - grupo 2
    </div>
    <div id="votes2" class="row">
      Hermano - grupo 2
      <button>
        CLICK
      </button>
    </div>
  </div>

En tu caso tienes varios padres que coinciden con que tienen la clase .row

Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()

var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();

El problema es el .parents() que devuelve una lista con todos los padres.

En tu caso tienes varios padres que coinciden con que tienen la clase .row

Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()

var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();

El problema es el .parents() que devuelve una lista con todos los padres.

Con el siguiente snippet se puede ver el problema, se colorean los hermanos de esos .parents() cuando solo te interesa que se coloreen los que están a su nivel.

$("button").click(function(){
    $(".row").css("background-color","white")
    console.log("Parent ID:"+$(this).parent('.row').attr("id"));
  $(this).parents(".row").siblings('.row').css("background-color","yellow")
});
.row {
  width: 100%;
  border: 1px solid black;
}

.row > .row {
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="song" class="row">
    Grupo 1
    <div id="desc" class="row">
      Hermano - grupo 1
    </div>
    <div id="votes" class="row">
      Hermano - grupo 1
      <button>
        CLICK
      </button>
    </div>
  </div>
  
  <div id="song2" class="row">
    Grupo 2
    <div id="desc2" class="row">
      Hermano - grupo 2
    </div>
    <div id="votes2" class="row">
      Hermano - grupo 2
      <button>
        CLICK
      </button>
    </div>
  </div>

En tu caso tienes varios padres que coinciden con que tienen la clase .row

Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()

var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();
Origen Enlace
x3k
  • 3.8k
  • 12
  • 40

El problema es el .parents() que devuelve una lista con todos los padres.

En tu caso tienes varios padres que coinciden con que tienen la clase .row

Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()

var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();