javascript - with - jquery selector prop




Come posso selezionare un elemento per nome con jQuery? (10)

Ho una colonna di tabella che sto cercando di espandere e nascondere:

jQuery sembra nascondere gli elementi td quando lo seleziono per class ma non per name dell'elemento.

Ad esempio, perché:

$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work

Notare l'HTML sottostante, la seconda colonna ha lo stesso nome per tutte le righe. Come posso creare questa collezione usando l'attributo name ?

<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>

È possibile ottenere la matrice di elementi per nome alla vecchia maniera e passare tale array a jQuery.

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

nota: l'unica volta in cui si dovrebbe avere un motivo per utilizzare l'attributo "nome" dovrebbe essere per gli input di checkbox o radio.

O potresti semplicemente aggiungere un'altra classe agli elementi per la selezione (questo è quello che farei)

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>


Ecco una soluzione semplice: $('td[name=tcol1]')



Personalmente, quello che ho fatto in passato è dare loro un id di classe comune e usarlo per selezionarli. Potrebbe non essere l'ideale in quanto hanno una classe specificata che potrebbe non esistere, ma rende la selezione molto più semplice. Assicurati di essere unico nei tuoi nomi di classe.

cioè per l'esempio sopra userò la tua selezione per classe. Meglio ancora sarebbe cambiare il nome della classe da grassetto a 'tcol1', in modo da non ottenere inclusioni accidentali nei risultati di jQuery. Se in grassetto si riferisce effettivamente a una classe CSS, è sempre possibile specificare entrambi nella proprietà della classe, ad esempio "class =" tcol1 bold "".

In sintesi, se non è possibile selezionare per nome, utilizzare un selettore jQuery complicato e accettare qualsiasi hit relativo alle prestazioni o utilizzare selettori di classe.

Puoi sempre limitare l'ambito jQuery includendo il nome della tabella cioè $ ('# tableID> .bold')

Questo dovrebbe limitare jQuery alla ricerca del "mondo".

Può ancora essere classificato come un selettore complicato, ma limita rapidamente qualsiasi ricerca all'interno della tabella con l'ID di '#tableID', quindi mantiene l'elaborazione al minimo.

Un'alternativa di questo se stai cercando più di 1 elemento in # table1 sarebbe di cercare questo separatamente e poi passarlo a jQuery in quanto ciò limita l'ambito, ma salva un po 'di elaborazione per cercarlo ogni volta.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}

Puoi ottenere l'elemento in JQuery usando il suo attributo ID come questo:

$("#tcol1").hide();

Puoi usare il selettore degli attribute :

$('td[name=tcol1]') // matches exactly 'tcol1'

$('td[name^=tcol]') // matches those that begin with 'tcol'

$('td[name$=tcol]') // matches those that end with 'tcol'

$('td[name*=tcol]') // matches those that contain 'tcol'

Qualsiasi attributo può essere selezionato usando la modalità [attribute_name=value] . Guarda l'esempio here :

var value = $("[name='nameofobject']");

Se hai qualcosa del tipo:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Puoi leggere tutto così:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

Il frammento:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">


function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>


<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var a= $("td[name=tcol3]").html();
    alert(a);

});

</script>


<table border="3">
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2tcol1</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol2" class="bold"> data2tcol2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol3" class="bold"> data2tcol3</td>
</tr>
</table>

Questo è il codice che può essere utile.







jquery-selectors