2014-10-30 35 views
9

voglio selezionare valore dell'attributo dando nome di attributo (inizia solo) Per esempio se abbiamo tag htmljQuery - Come selezionare il valore in base al nome dell'attributo inizia con

<div class = "slide" data-confirmID = "46" confirmID = "54"/> 

voglio selezionare il valore dall'attributo inizia con data-

Grazie in anticipo per l'aiuto.

+0

Cosa succede se si dispone di più attributi che iniziano con 'data-'? Quale valore dovresti ottenere? –

+0

jQuery ha un inizio con selettore: http://api.jquery.com/attribute-start-with-selector/ – Moob

+0

Nel mio scenario ne ho solo uno .. quindi se potessi selezionare il nome dell'attributo iniziando con 'data-', che dovrebbe fare – user3111581

risposta

19

Se si desidera che tutti gli attributi data-*, è possibile scorrere i dati oggetto JQ:

$('.slide').each(function(){ 
    for(data in $(this).data()) 
     console.log(data); // returns confirmID so element as an attribute `data-confirmID` 
}); 

Ma questo oggetto dati può contenere altre chiavi che non sono attribuiscono, incastonati per esempio da parte di alcuni plugin.

EDIT

Per ottenere tutti i tipi di attributo "inizia con", è possibile personalizzare il proprio selettore jQuery:

jQuery.extend(jQuery.expr[':'], { 
 
    attrStartsWith: function (el, _, b) { 
 
     for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) { 
 
      if(atts[i].nodeName.toLowerCase().indexOf(b[3].toLowerCase()) === 0) { 
 
       return true; 
 
      } 
 
     } 
 
     
 
     return false; 
 
    } 
 
}); 
 

 
//e.g: 
 
$('.slide:attrStartsWith("data-")').css('color', 'red'); 
 
$('.slide:attrStartsWith("conf")').css('color', 'blue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" data-testID="666">1</div> 
 
<div class="slide" confirmID="54" >2</div>

Se sul lato opposto, si vuole per verificare la fine dell'attributo con una stringa specifica, è possibile utilizzare:

jQuery.extend(jQuery.expr[':'], { 
 
    attrEndsWith: function (el, _, b) { 
 
     for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) { 
 
      var att = atts[i].nodeName.toLowerCase(), 
 
       str = b[3].toLowerCase(); 
 
      if(att.length >= str.length && att.substr(att.length - str.length) === str) { 
 
       return true; 
 
      } 
 
     } 
 
     
 
     return false; 
 
    } 
 
}); 
 

 
$('.slide:attrEndsWith("testID")').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" data-testID="666">1</div> 
 
<div class="slide" confirmID="54" >2</div>

+0

Grazie @ A. Wolff aiuta !! – user3111581

+0

@ A.Wolff Non possiamo accedere ad altri attributi che non partono da "dati"? –

+1

@NishanSenevirathna Certo, è necessario innanzitutto ottenere tutti gli attributi e quindi applicare la logica, ad esempio per ottenere attributi vedere: http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element- with-javascript-jquery –

0

Gli attributi sono proprietà dell'elemento, in modo da poter utilizzare un ciclo for-in

for (var prop in element) { 
    if (prop.indexOf('data-') == 0) { 
     var val = element[prop]; 
     break; 
    } 
} 
2

Si potrebbe fare come un plugin jQuery. Non sono convinto che il suo il modo giusto per andare a questo proposito, ma ecco un esempio:

(function($) { 
 
    $.fn.attrBegins = function(s) { 
 
     var matched = ""; 
 
     this.each(function(index) { 
 
      $.each(this.attributes, function(index, attr) { 
 
       if(attr.name.indexOf(s)===0){ 
 
        matched = attr.value 
 
       } 
 
      }); 
 
     }); 
 
     return matched; 
 
    }; 
 
})(jQuery); 
 

 
//example use 
 
var val = $('div').attrBegins('data-'); 
 
alert(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slide" data-confirmID="46" confirmID="54" />

1

@Moob approssimazione a jQuery attrBegins plug-in, restituisce il nome dell'attributo (una stringa), quando sono partite ... di un singolo elemento (ignorando più corrispondenze). Ho aggiunto il codice per restituire una raccolta JQuery con gli elementi corrispondenti.

Ecco il codice:

(function($) { 
    $.fn.attrBegins = function(s) { 
     var matched = []; 
     this.each(function(index) { 
      var elem = this; 
      $.each(this.attributes, function(index, attr) { 
       if(attr.name.indexOf(s)===0){ 
        matched.push(elem); 
       } 
      }); 
     }); 
     return $(matched); 
    }; 
})(jQuery); 

esempio d'uso ...

HTML:

<div> 
    <div data-pet-dog></div> 
    <div data-pet-cat></div> 
</div> 

Javascript:

var foo = $("div").attrBegins("data-pet"); 
// results into... foo = [ <div data-pet-dog></div> , <div data-pet-cat></div> ] 

NOTA: per evitare problemi di prestazioni quando elementi Selezione wich avere un nome attributo che inizia con una stringa personalizzata utilizzando attrBegins, è consigliato per restringere il più possibile il selettore originale, per ridurre la raccolta di elementi da iterare. attrBegins filtra semplicemente la raccolta di elementi preselezionati, non esplora gli elementi secondari dell'insieme di elementi fornito.