2012-05-16 17 views
5

Ho un gruppo di record di database (senza ID autoincrement o qualsiasi altra cosa del genere) visualizzato come un elenco, e mi è capitato che dovessi differenziare ognuno di essi con un unico id.Assicurati che la stringa sia un nome ID CSS valido

Potrei semplicemente aggiungere un contatore in esecuzione nel ciclo e farlo con esso, ma sfortunatamente questo ID deve essere cross-referenceable in tutto il sito, tuttavia l'elenco è ordinato o filtrato.

Pertanto ho avuto l'idea di includere il titolo del record come parte dello id (con un prefisso in modo che non si scontri con gli elementi del layout).

Come è possibile trasformare una stringa in un nome id in modo infallibile in modo che non contenga mai caratteri che possano violare l'HTML o non funzionare come selettori CSS validi?

Ad esempio;

Title ==> prefix_title 
TPS Report 2010 ==> prefix_tps_report_2010 
Mike's "Proposal" ==> prefix_mikes_proposal 
#53: Míguèl ==> prefix_53_miguel 

I titoli sono sempre abbastanza diversi da evitare conflitti e non conterranno mai caratteri non occidentali.

Grazie!

+0

Se io ottenere il vostro punto: hai qualche riga in una tabella , per ogni riga che si desidera generare un elemento di elenco HTML e ogni elemento deve avere un ID univoco (id 'attributo HTML'?), questo id non dovrebbe rompere il codice HTML ed essere un selettore CSS valido. Perché hai bisogno di una cosa del genere, e perché parli del selettore CSS valido? Non puoi scrivere * static * selettore CSS basato su * dynamic * id. – pomeh

+2

Perché non utilizzare MD5? –

+0

pomeh: Ho bisogno di fare riferimento a singole voci di elenco con jQuery, ed è molto più semplice se stampando la lista, ho impostato l'id per ogni elemento. || Rick: Questa è ... una soluzione imbarazzante, semplice ma impressionante. –

risposta

0

Non è necessario utilizzare l'attributo HTML id. È possibile utilizzare HTML5 data-* attribute per memorizzare valori definiti dall'utente. Ecco un esempio:

<ul class="my-awesome-list"> 
    <!-- PHP code, begin a for/while loop on rows --> 
    <li data-rowtitle="<?php echo json_encode($row["title"]); ?>"> 
     <?php echo $row["title"]; ?> 
    </li> 
    <!-- PHP loop end --> 
</ul> 

Poi, in voi codice jQuery, è possibile accedere ai valori data-* con il metodo $.fn.data

$(".my-awesome-list li").each(function(){ 
    var realTitle = $(this).data('rowtitle'); 
}); 
+0

è questo 'data-xxxx' e $ (y) .data (xxxx) è una funzionalità jQuery integrata? E come è cross browser se è così? –

+0

Gli attributi 'data- *' sono definiti nelle specifiche HTML5. Tuttavia, puoi utilizzarli anche se la tua pagina non utilizza HTML5, sono riconosciuti da tutti i browser. – pomeh

+0

E se volessi selezionare uno specifico 'li'? Non richiederebbe di scorrere l'elenco controllando ciascun elemento per lo specifico attributo 'data- *', il che significa che potrei anche dimenticare l'attributo e controllare direttamente il contenuto dell'elenco? –

3

avevo bisogno di una soluzione simile per Deeplink Ancore.

trovato questo utile:

function seoUrl($string) { 
    //Lower case everything 
    $string = strtolower($string); 
    //Make alphanumeric (removes all other characters) 
    $string = preg_replace("/[^a-z0-9_\s-]/", "", $string); 
    //Clean up multiple dashes or whitespaces 
    $string = preg_replace("/[\s-]+/", " ", $string); 
    //Convert whitespaces and underscore to dash 
    $string = preg_replace("/[\s_]/", "-", $string); 
    return $string; 
} 

credito: https://stackoverflow.com/a/11330527/3010027

PS: Wordpress-Gli utenti hanno guardate qui: https://codex.wordpress.org/Function_Reference/sanitize_title

Problemi correlati