Variables de json a php

Un saludo,
estoy buscando la solución a un atasco que tengo en una aplicación web, seguro que tenéis la solución rápida.

El tema es que estoy montando una aplicación-web con jquery mobile en la que recibo los datos de mysql con json a traves de un php. El código que uso para recibir los datos es el siguiente:

Código Javascript :

$.getJSON("familias.php",function(data){ 
for(familias in data){ 
$("#listadofamilias").append('<li>'+'<a  href="#articulos">'+'<img src="img/icono.png"/>'+'<h3>'+data[familias].familia+'</h3>'+'</li>'); 
}
$('#listadofamilias').listview('refresh');

});

En este momento al hacer click en la lista de familias me manda a otra página que abre los artículos que tiene este codigo:

Código Javascript :

$.getJSON("articulos_encodeflex.php?varfami=1",function(data){ 
for(articulos in data){ 
$("#listadoarticulos").append('<li>'+'<a class="viewItem" href="#detalle">'+'<img src="img/icono.png"/>'+'<h3>'+data[articulos].articulo+'</h3>'+'<p>'+' Precio:'+data[articulos].precio+'€'+'</p>'+'<a  href="#carrito"  data-rel="dialog" data-transition="slideup">'+'</li>'); 
}
$('#listadoarticulos').listview('refresh'); 
});

como veis tengo preparado el php para que reciba una variable (varfami) en la que como prueba le he puesto "1" y todo funciona bien. La pregunta es:

¿cómo puedo rellenar esa variable con la familia a la que se ha hecho click?

He intentado de todo y no soy capaz, muchas gracias de antemano

Cuando imprimas la lista de familias, en cada familia imprimes un input oculto que tenga como valor el id de la familia.

después al dar click en alguna familia, guardas el id en una variable y la pasas como parámetro a una función que tome el id de la familia en cuestión y ejecute el getJson.

Algo así:

Código Javascript :

 $('#listado-familias li').on('click', function(){

            $id_familia = $(this).find('input[type="text"]').val();

            articulos($id_familia);


         });

         function articulos(id){

              $url = "articulos_encodeflex.php?varfami=" + id

              $.getJSON($url,function(data){ 
                  for(articulos in data){ 
                  $("#listadoarticulos").append('<li>'+'<a class="viewItem" href="#detalle">'+'<img src="img/icono.png"/>'+'<h3>'+data[articulos].articulo+'</h3>'+'<p>'+' Precio:'+data[articulos].precio+'€'+'</p>'+'<a  href="#carrito"  data-rel="dialog" data-transition="slideup">'+'</li>'); 
                  }
                  $('#listadoarticulos').listview('refresh'); 
                  });
               }

Muchas gracias por la respuesta!...pero no me ha salido ahora al abrir la pagina no me aparece ningún artículo.

así lo tengo:

$.getJSON("familias_encodeflex.php",function(data){
for(familias in data){
$("#listadofamilias").append('<li>'+'<a href="#articulos">'+'<img src="img/icono.png"/>'+'<h3>'+data[familias].familia+'<input type="hidden" id="varfamil" value="'+data[familias].id_familia+'"></h3>'+'</li>');
}

$('#listadofamilias').listview('refresh');

});

$('#listadofamilias li').on('click', function(){

$id_fam = $(this).find('input[type="text"]').val();


articulos($id_fam);


});


function articulos(id){

$url = "articulos_encodeflex.php?varfami=" + id

$.getJSON($url,function(data){
for(articulos in data){
$("#listadoarticulos").append('<li>'+'<a class="viewItem" href="#detalle">'+'<img src="img/icono.png"/>'+'<h3>'+data[articulos].articulo+'</h3>'+'<p>'+' Precio:'+data[articulos].precio+'€'+'</p>'+'<a href="#carrito" data-rel="dialog" data-transition="slideup">'+'</li>');
}
$('#listadoarticulos').listview('refresh');
});
}


que puede fallar?
te agradezco la ayuda