JQuery: Realizar una acción sobre el resto de elementos

DarkKing · #1 (**permalink**) 04/02/2010, 08:02

Buenas. A ver su me pueden ayudar a conseguir esto:

Tengo por ejemplo estos divs:
<div class="brc">1</div>
<div class="brc">2</div>
<div class="brc">3</div>
<div class="brc">4</div>

Lo que quiero es que al pulsar uno de los divs se realice una acción sobre todos los divs con la clase "brc" excepto en el div donde se ha pulsado.

Puede que se haga con .siblings(), pero no me sale.

Dany_s · #2 (**permalink**) 04/02/2010, 08:18

Código HTML:

<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.brc').click( function(){
        $(this).css('color', 'blue').siblings().css('color', 'red');
    });
});
</script>
</head>
<body>
    <div class="brc">1</div>
    <div class="brc">2</div>
    <div class="brc">3</div>
    <div class="brc">4</div>
</body>
</html>

mayid · #3 (**permalink**) 04/02/2010, 09:15

Creo que tambien se puede especificar div.brc dentro del metodo .siblings:

Cita:

.siblings("div.brc")

Me gustaría también que probaras esto:

Cita:

$('.brc').click( function(){
$("div.brc").not($(this)).css('color', 'red');
});

... solo para saber si funciona.

DarkKing · #4 (**permalink**) 04/02/2010, 09:20

Gracias a los 2

Ahora tengo otra duda. Si lo tengo de la siguiente forma y al pulsar en un div de arriba, quiero que todos los de abajo cambien excepto el que tenga el mismo numero que el que he pulsado arriba, ¿cómo lo haría?

Por ejemplo: pulso en el 2 de arriba y quiero que el 1, 3 y 4 de abajo cambien de color.

<div id="cont1">
<div class="brc">1</div>
<div class="brc">2</div>
<div class="brc">3</div>
<div class="brc">4</div>
</div>
<div class="brc">1</div>
<div class="brc">2</div>
<div class="brc">3</div>
<div class="brc">4</div>

DarkKing · #5 (**permalink**) 04/02/2010, 09:25

¡Solucionado! he utilizado el modo que ha propuesto mayid

¡Gracias!

Dany_s · #6 (**permalink**) 04/02/2010, 10:26

como seleccionas el de abajo también? postea el código

DarkKing · #7 (**permalink**) 04/02/2010, 14:26

El de abajo al final no lo he conseguido. Al final lo he hecho de la primera forma.

Dany_s · #8 (**permalink**) 04/02/2010, 16:44

puede ser algo asi

Código HTML:

<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.brc').click( function(e){
        var index = $(this).index();
        $('#buscar>div').each( function (i, val){
            $(val).find('div:eq('+index+')').css('color', 'red').siblings().css('color', 'blue')
        });

    });
});
</script>
</head>
<body>

<div id="buscar">
    <div id="cont1">
        <div class="brc">1</div>
        <div class="brc">2</div>
        <div class="brc">3</div>
        <div class="brc">4</div>
    </div>
    <div id="cont2">
        <div class="brc">1</div>
        <div class="brc">2</div>
        <div class="brc">3</div>
        <div class="brc">4</div>
    </div>
</div>

</body>
</html>