[SOLUCIONADO] Selectores complejos jQuery

[roombah]

Hola buenas,

Tengo una estructura definida para checkboxs de comunidades y provincias

Código HTML:

 <div class="divComunidad">
  .......
  <input type="checkbox" class="comunidad">
 .......
  <input type="checkbox" class="provincia">
 .......
  <input type="checkbox" class="provincia">
 .......
  <input type="checkbox" class="provincia">
 .......
  <input type="checkbox" class="provincia">
 .......
 </div> 

Los puntos suspensivos significan mas código que va por el medio de otros div, label y tal el caso es que estaba intentando hacer una función jquery que al seleccionar una comunidad marcase todas sus provincias y que valiese para todas las comunidades claro.

Segun yo lo he pensado el tema seria un poco como

Código:

  $(".comunidad").change(function () {
         var divComunidadPadre = $("no tengo ni idea de como acceder a este");
         var provincias = divComunidadPadre.find(".provincia");
         if ($(".comunidad").is(":checked")){
                 provincias.prop("checked", true);
         }else{
                 provincias.prop("checked", false);     
          }
  });

el problema esta en esta linea var divComunidadPadre = $("no tengo ni idea de como acceder a este"); o eso creo xD si alguien tiene una solucion mas sencilla estoy abierto a cualquier sugerencia :)

[PHPeros]

De complejo no tiene nada:

Código:

$("#divComunidad")

[roombah]

Quiza sea mas complejo de lo que tu has entendido...

Primero con tu solución $("#divComunidad") no accedes a nada, si lees bien veras que divComunidad es una clase no un id por lo tanto seria $(".divComunidad") y con esto accedo a todos los div con clase divComunidad de la pagina.

Segundo no quiero acceder a todos los div de comunidad porque hay muchas comunidades sino que quiero tener acceso al div comunidad que contiene la provincia o comunidad sobre la que se hizo click.

Tercero ,por si acaso , se que poniendo id a cada comunidad lo haría sin ningún problema pero no es cuestión de repetir código tantas veces, la gracia esta en hacer que una funcion sirva para todos.

Un saludo

[Alexis88]

Una vez seleccionado el <div> padre, busca a uno de los elementos que contiene con el método find y como quieres que capture algo según el elemento al que se le dio clic, entonces necesitas primer capturar al elemento objetivo, es decir, al que se le dio el clic, para lo cual debes usar la propiedad event.target.

Código Javascript:

$(window).click(function(event){
    var dato = event.target.propiedad;
    $(".divComunidad").find(dato);
});
 

La propiedad debe ser uno de los atributos del elemento en cuestión, el cual contiene el dato con el que se puede identificar al elemento que contiene el <div>.

Adáptalo a tus necesidades, saludos.

[roombah]

Perdon por la tardanza pero tuve unos dias complicados

Ya solucione el problema lo escribo por si le sirviese a alguien en el futuro

Código HTML:

<div class="divComunidad">
 <div class="row">
    <input type="checkbox" class="comunidad">
  </div>
  <div class="row">
  <input type="checkbox" class="provincia">
  </div>
  <div class="row">
    <input type="checkbox" class="provincia">
  </div>
  <div class="row">
    <input type="checkbox" class="provincia">
  </div>
  <div class="row">
    <input type="checkbox" class="provincia">
  </div>
</div> 

Esa es mi estructura html repetida tantas veces como comunidades hay en España
y este es el jquery que hace lo que yo necesitaba, la verdad todo era cuestion del metodo parent() que hasta ahora no sabia que existia

Código:

$(".comunidad").each(function () {
  var comunidad = $(this);
  var row = comunidad.parent();
  var divComunidad = row.parent();

  comunidad.change( function () {
    var provincias = divComunidad.find(".provincia");

    if(comunidad.is(":checked")){
      provincias.prop("checked", true);
    }
    }else{
       provincias.prop("checked", false);
    }
);
});