javascript - Hvordan kan jeg velge et element etter navn med jQuery?

Jeg har en tabellkolonne jeg prøver å utvide og skjule. jQuery ser ut til å skjule <td>-elementene når jeg velger det etter class, men ikke etter elementets name.

For eksempel:

$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work. [Edit: this is NOT selecting by name! This is selecting by element type.]

Merk HTML-en nedenfor. Den andre kolonnen har samme name for alle rader. Hvordan kunne jeg opprette denne samlingen ved å bruke name-attributtet?

<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>

Svar #1

Du kan bruke jQuerys attributtvelger:

$('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'

Svar #2

Enhver attributt kan velges ved å bruke [attribute_name=value]-måten. Se eksemplet her:

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

Svar #3

Hvis du har noe som:

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

Du kan lese alt slik:

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

Utdraget:

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">

Svar #4

Du kunne få matrisen av elementer etter navn på den gammeldagse måten og sende den matrisen til 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>

merknad: den eneste gangen du ville ha en grunn til å bruke «name»-attributtet, bør være for avkrysningsbokser eller radioknapper.

Eller du kan bare legge til en annen klasse til elementene for valg. (Dette er hva jeg ville gjort)

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>

Svar #5

Du kan hente navneverdi fra et inputfelt ved å bruke name-elementet i jQuery ved å:

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ 
console.log(firstname);
console.log(lastname);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>

Svar #6

Rammeverk bruker vanligvis klamme navn i skjemaer, som:

<input name=user[first_name] />

De kan nås ved:

// in JS:
this.querySelectorAll('[name="user[first_name]"]')

// in jQuery:
$('[name="user[first_name]"]')

// or by mask with escaped quotes:
this.querySelectorAll("[name*=\"[first_name]\"]")

Svar #7

Jeg har gjort slik, og det fungerer:

$('[name="tcol1"]')

https://api.jquery.com/attribute-equals-selector/

Svar #8

Du glemte det andre settet med anførselstegn, noe som gjør det aksepterte svaret feil:

$('td[name="tcol1"]')

Relaterte artikler