Skip to main content
2 de 2
se añadieron 1406 caracteres en el cuerpo
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();
x3k
  • 3.8k
  • 12
  • 40