1238

මම පුළුල් කිරීමට සහ සැඟවීමට උත්සාහ කරන වගු තීරුවක් තබා ගන්න:

jQuery මූලද්රව්ය නාමයෙන් නොව පන්තියෙන්td තෝරාගත් විට මූලද්රව්ය සඟවන බවක් පෙනේ .

උදාහරණයක් ලෙස, ඇයි:

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

පහත දැක්වෙන HTML සටහන සටහන් කරන්න, දෙවන තීරුවේ සියලුම පේළි සඳහා එකම නමක් ඇත. 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>

— ටීටීටී
source

7

ප්‍රශ්නය අන්තර්ගතයට නොගැලපේ. හැඳුනුම්පත සහ නම වෙනස් ගුණාංග වන අතර ඒවා වෙනස් ලෙස තෝරා ඇත

— මාර්ක් ඩබ්ලිව්

12

එකම හැඳුනුම්පතක් සහිත මූලද්‍රව්‍ය තිබීම W3C ප්‍රමිතීන්ට පටහැනිය; එනම් අනුපිටපත් හැඳුනුම්පත් නැත.

— ස්ටීව් ටෝබර්

2203

ඔබට jQuery ගුණාංග තේරීම භාවිතා කළ හැකිය :

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

— ජෝන් එරික්සන්
source

2

කුතුහලය දනවන අයුරින් යමෙක් මෙය tcol1 ලෙස ලියන්නේ කෙසේද, tcol1 නම් කර ඇති තීරු හැර වෙනත් තීරු සැඟවීමට ඔවුන්ට අවශ්‍ය නම් කුමක් කළ යුතුද?

— HPWD

25

Ar වරුන් - ඔබට ටීඩී එක අතහැර දැමිය හැකිය ... උදාහරණයක් ලෙස $ ('[name ^ = tcol]') 'නම' යන ගුණාංගය ඇති සියලුම මූලද්‍රව්‍යයන්ට 'tcol' සමඟ ආරම්භ වන අගයක් සමඟ ගැලපේ

— ජෝන් එරික්සන්

මට එය like ('td [name = tcol1]') ලෙස භාවිතා කිරීමට සිදුවිය - td සහ [] අතර ඉඩක් නොමැතිව එය මට NULL ලබා දුන්නේය.

— akki

OgDougMolineux ඇත්ත වශයෙන්ම, ඔහු නමක පෙර නිවැරදි කිරීම සමඟ ගැලපේ .

— mareoraft

7

@HPWD $("td:not([name='tcol1'])")උදාහරණයක් ලෙස : තේරීම් කාරකය නොවේ . ඔබට එය මෙම ෆෙඩල්

— ජොහැන්නස්

231

ඕනෑම ලක්ෂණයක් [attribute_name=value]මාර්ගය භාවිතා කර තෝරා ගත හැකිය . නියැදිය මෙතැනින් බලන්න :

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

— user2804791
source

නමුත් ඔබ ඉහත කේතය භාවිතා කළ යුතුය, එවිට ඔබට qoutations සමඟ අතපසු නොවනු ඇත! සුභ පැතුම් සහ ස්ටැකෝවර්ෆ්ලෝ ප්‍රජාවට සාදරයෙන් පිළිගනිමු :)

— අෆ්සාල් අහමඩ්

7

මෙය අවම වශයෙන් මා වෙනුවෙන් ක්‍රියා නොකරයි - නමුත් පහත ප්‍රකාශය ක්‍රියාත්මක වේvar value = $("[name=nameofobject]");

— ප්‍රණව්

2

මුල් පිළිගත් පිළිතුරෙන් වසර 4 කට පසු මෙය පැමිණි විට 17 ක් ලැබීම පුදුමයට කරුණකි

— හුවාන්වාදය

6

දැන් ඉහළට 21 ක් ... සමහර විට එයට හේතුව 'td [name = tcol1]' ට වඩා අඩු අවුල් සහගත නිසා විය හැකිය, විශේෂයෙන් td අවශ්‍ය නොවන නිසා සහ මා වැනි අය වැරදි මාවතකට යොමු කරයි

— Chris Sprague

2

මගේ ආදාන නම් වලට මේ වගේ [] තිබුනි : <input name="itemid[]">. එබැවින් මෙම පිළිතුර පිළිගත් පිළිතුරට වඩා හොඳින් ක්‍රියාත්මක විය.

— සුනීෂ් මෙනන්

62

ඔබට එවැනි දෙයක් තිබේ නම්:

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

ඔබට මේ සියල්ල කියවිය හැකිය:

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

ස්නිපටය:

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

ස්නිපටය පුළුල් කරන්න

— ඇන්ඩ්‍රියාස් එල්.
source

26

ඔබට පැරණි ක්‍රමයට නම් කර මූලද්‍රව්‍ය පෙළ ලබා ගත හැකි අතර එම අරාව 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>

ස්නිපටය පුළුල් කරන්න

සටහන: ඔබට "නම" ගුණාංගය භාවිතා කිරීමට හේතුවක් ඇති එකම අවස්ථාව විය යුත්තේ පිරික්සුම් කොටුව හෝ ගුවන් විදුලි යෙදවුම් සඳහා ය.

නැතහොත් ඔබට තෝරා ගැනීම සඳහා මූලද්‍රව්‍යවලට වෙනත් පන්තියක් එක් කළ හැකිය (මෙය මම කරන්නෙමි)

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>

ස්නිපටය පුළුල් කරන්න

— ඔබේ මිතුරා කෙන්
source

25

JQuery හි නාම මූලද්‍රව්‍යය භාවිතා කරමින් ආදාන ක්ෂේත්‍රයකින් ඔබට නම අගය ලබා ගත හැක්කේ:

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>

ස්නිපටය පුළුල් කරන්න

— ශ්‍රීකාන්ත් ඩී
source

+1 වර්ගය ඇතුළුව නාම ක්ෂේත්‍රයක් තෝරාගෙන හැඳුනුම් අංශයක් තුළ ප්‍රති results ල සීමා කරන එකම උදාහරණය.

— SharpC

මම එකඟයි. ඔබේ පිටුවේ ඔබට විවිධ පෝරම තිබිය හැකි අතර, නිසි ඒවාට සීමා කිරීම හොඳ අදහසකි.

— කර්.මා

16

රාමු සාමාන්‍යයෙන් වරහන් නම් ආකෘති වලින් භාවිතා කරයි, වැනි:

<input name=user[first_name] />

ඔවුන්ට ප්‍රවේශ විය හැක්කේ:

// 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]\"]")

— එහිනික්ලෝයි
source

13

මම මේ ආකාරයට කර ඇති අතර එය ක්‍රියාත්මක වේ:

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

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

— kscius
source

6

දෙවන මිල ගණන් ඔබට අමතක වී ඇති අතර එමඟින් පිළිගත් පිළිතුර වැරදිය.

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

— ක්‍රිස් ජේ
source

උදාහරණයක් ලෙස ක්ෂේත්‍ර නාමය නම්'td[name="nested[fieldName]"]'

— 23:57 ට

මෙය ඉතා සත්‍යයකි. JQuery හි නවතම අනුවාදයන් (v. 3.2.1) නිසි උපුටා දැක්වීමකින් තොරව ගුණාංග පදනම් කරගත් තේරීම් අංගයක් හමු වූ විට අසමත් වීමට බොහෝ දුරට ඉඩ ඇත.

— HoldOffHunger

5

මෙන්න සරල විසඳුමක්: $('td[name=tcol1]')

— අමුත්තන්ගේ
source

3

JQuery හි එහි හැඳුනුම්පත භාවිතා කිරීමෙන් ඔබට මූලද්‍රව්‍යය ලබා ගත හැකිය:

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

— කාලෙබ්එච්සී
source

4

තනි මූලද්‍රව්‍යයකට පමණක්

— ගැලපේ

2

ඒ ගැන කණගාටුයි. බෙන් එස් කියපු දේ කරන්න.

— කාලෙබ්එච්සී

ඔව්, හැඳුනුම්පත සම්බන්ධයෙන් එය සත්‍යයකි. නම අනුව තෝරාගැනීමේදී, තේරීම් කාරක / ආරෝපණ එක්වාල්ස් ගැන සඳහන් කරමින් මෙහි ලිපියක් තිබී ඇති අතර එය ප්‍රයෝජනවත් විය.

— ටීටී

1

සමහර විට ප්‍රශ්නය සංස්කරණය කර ඇති නමුත් ඔහු දැන් නම යොමු කිරීමක් ඉල්ලා සිටී, නමුත් ඔව් තනි මූලද්‍රව්‍යයන්ට හැඳුනුම් තේරීම භාවිතා කළ හැකිය

— nckbrz

ඇත්ත වශයෙන්ම නම සඳහා ප්‍රශ්නය

— ප්‍රතමේෂ් තවත්

3

ඔබට තේරීම් කාරකයක් ලෙස ඕනෑම ලක්ෂණයක් භාවිතා කළ හැකිය [attribute_name=value].

$('td[name=tcol1]').hide();

3

පුද්ගලිකව, මම අතීතයේ කළ දෙය නම් ඔවුන්ට පොදු පන්තියේ හැඳුනුම්පතක් ලබා දී ඒවා තෝරා ගැනීමට භාවිතා කිරීමයි. ඔවුන් සතුව පන්තියක් ඇති බැවින් එය පරමාදර්ශී නොවිය හැකි නමුත් එය තේරීම පහසු නිරයක් බවට පත් කරයි. ඔබගේ පන්ති නාමවල ඔබ අද්විතීය බව සහතික කරගන්න.

එනම් ඉහත උදාහරණය සඳහා මම ඔබේ තේරීම පන්තිය අනුව භාවිතා කරමි. පංතියේ නම තද අකුරින් 'tcol1' ලෙස වෙනස් කිරීම වඩා හොඳය, එබැවින් ඔබට jQuery ප්‍රති .ල වලට අහම්බෙන් ඇතුළත් කිරීම් නොලැබේ. තද අකුරු ඇත්ත වශයෙන්ම CSS පන්තියකට යොමු කරන්නේ නම්, ඔබට සෑම විටම පන්ති දේපල දෙකම නියම කළ හැකිය - එනම් 'class = "tcol1 bold"'.

සාරාංශයක් ලෙස, ඔබට නම අනුව තෝරාගත නොහැකි නම්, එක්කෝ සංකීර්ණ jQuery තේරීම් කාරකයක් භාවිතා කර අදාළ කාර්ය සාධන පහරක් භාර ගන්න හෝ පන්ති තේරීම් භාවිතා කරන්න.

Table ('# tableID> .bold') වගුවේ නම ඇතුළත් කිරීමෙන් ඔබට සැමවිටම jQuery විෂය පථය සීමා කළ හැකිය.

එමඟින් jQuery "ලෝකය" සෙවීම සීමා කළ යුතුය.

එය තවමත් සංකීර්ණ තේරීම් කාරකයක් ලෙස වර්ග කළ හැකි නමුත්, එය '# ටේබල් අයිඩී' හැඳුනුම්පත සමඟ මේසය තුළ ඇති ඕනෑම සෙවීමක් ඉක්මණින් සීමා කරයි, එබැවින් සැකසුම අවම මට්ටමක තබා ගනී.

ඔබ # වගුව 1 තුළ මූලද්‍රව්‍ය 1 කට වඩා සොයන්නේ නම් මේ සඳහා විකල්පයක් වනුයේ මෙය වෙන වෙනම සොයා බලා jQuery වෙත යැවීමයි. මෙය විෂය පථය සීමා කරයි, නමුත් සෑම අවස්ථාවකදීම එය බැලීමට සැකසුම් ටිකක් ඉතිරි කරයි.

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

— ස්ටීව් චිල්ඩ්ස්
source

තරමක් වාචික පිළිතුර, නමුත් මෙය මූලික වශයෙන් නිවැරදි සමස්ත ප්‍රවේශයයි.

— HoldOffHunger

2

ටිකක් වචන සහිත විය හැකි නමුත්, කුඩා පේළියක් පැහැදිලි කරන තනි පේළියකට වඩා යෝජනාවක් පිටුපස ටිකක් අමතර පැහැදිලි කිරීමක් සහ තර්කයක් තිබීම හොඳය! ;) යමෙකු යම් දෙයකට අලුත් වූ විට සහ අ) එය ක්‍රියාත්මක වන්නේ ඇයිද යන්න තේරුම් ගැනීමට උත්සාහ කරන විට එය ප්‍රයෝජනවත් වේ. ආ) එය ක්‍රියාත්මක වන්නේ කෙසේද

— ස්ටීව් චිල්ඩ්ස්

2

කාර්ය සාධනය

අද (2020.06.16) ක්‍රෝම් 83.0, සෆාරි 13.1.1 සහ ෆයර්ෆොක්ස් 77.0 මත මැකෝස් හයි සියෙරා හි තෝරාගත් විසඳුම් සඳහා මම පරීක්ෂණ සිදු කරමි.

නිගමන

මූලද්රව්ය නමින් ලබා ගන්න

getElementByName (ඇ) විශාල හා කුඩා අරා සඳහා සියලුම බ්‍රව්සර් සඳහා වේගවත්ම විසඳුමයි - කෙසේ වෙතත් මම බොහෝ විට කම්මැලි පැටවීමේ විසඳුමක් විය හැකිය, නැතහොත් එය නම-මූලද්‍රව්‍ය යුගල සහිත අභ්‍යන්තර බ්‍රව්සර් හැෂ්-කෑෂ් භාවිතා කරයි.
මිශ්‍ර js-jquery ද්‍රාවණය (B) querySelectorAll(D) ද්‍රාවණයට වඩා වේගවත්ය
පිරිසිදු jquery විසඳුම (A) මන්දගාමී වේ

නාමයෙන් පේළි ලබාගෙන ඒවා සඟවන්න (අපි කලින් ගණනය කළ දේශීය විසඳුම (I) - න්‍යායාත්මකව වේගවත්ම) සංසන්දනයෙන් බැහැර කරමු - එය යොමු කිරීමක් ලෙස භාවිතා කරයි)

පුදුමයට කරුණක් නම් මිශ්‍ර js-jquery ද්‍රාවණය (F) සියලු බ්‍රව්සර්වල වේගවත්ම වේ
පුදුමයට කරුණක් නම්, පූර්ව වගු විසඳුම (I) විශාල වගු සඳහා jquery (E, F) විසඳුම් වලට වඩා මන්දගාමී වේ (!!!) - මම එය පරීක්ෂා කරමි .hide () jQuery ක්‍රම කට්ටල විලාසය "default:none" සඟවා අංග මත - නමුත් එය ඔවුන්, වේගවත් ක්රමයක් සොයා යන බවත් කරනවාට වඩා එය කරන්නelement.style.display='none'
jquery (E) ද්‍රාවණය විශාල වගු මත ඉතා වේගවත් ය
jquery (E) සහ querySelectorAll (H) විසඳුම් කුඩා වගු සඳහා මන්දගාමී වේ
getElementByName (G) සහ querySelectorAll (H) විසඳුම් විශාල වගු සඳහා තරමක් මන්දගාමී වේ

විස්තර

( A , B , C , D ) කියවන මූලද්‍රව්‍ය සඳහා මම පරීක්ෂණ දෙකක් සිදු කර එම මූලද්‍රව්‍ය සඟවන්න (E, F, G, H, I)

කුඩා වගුව - පේළි 3 - ඔබට පරීක්ෂණය ධාවනය කළ හැකිය මෙතැන
විශාල වගුව - පේළි 1000 - ඔබට පරීක්ෂණය ධාවනය කළ හැකිය මෙතැන

පහත දැක්වෙන ස්නිපටය භාවිතා කළ කේත ඉදිරිපත් කරයි

කේත ස්නිපටය පෙන්වන්න

///programming/1107220/how-can-i-select-an-element-by-name-with-jquery#

// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1

function A() {
  return $('[name=tcol1]');
}

function B() {
  return $(document.getElementsByName("tcol1"))
}

function C() {
  return document.getElementsByName("tcol1")
}

function D() {
  return document.querySelectorAll('[name=tcol1]')
}

function E() {
  $('[name=tcol1]').hide();
}

function F() {
  $(document.getElementsByName("tcol1")).hide();
}

function G() {
  document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); 
}

function H() {
  document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); 
}

function I() {
  let elArr = [...document.getElementsByName("tcol1")];
  let length = elArr.length
  for(let i=0; i<length; i++) elArr[i].style.display='none';
}




// -----------
// TEST
// -----------

function reset() { $('td[name=tcol1]').show(); } 

[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
  <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>
</table>

<button onclick="E()">E: hide</button>
<button onclick="F()">F: hide</button>
<button onclick="G()">G: hide</button>
<button onclick="H()">H: hide</button>
<button onclick="I()">I: hide</button><br>
<button onclick="reset()">reset</button>

ස්නිපටය පුළුල් කරන්න

උදාහරණ Chrome හි ප්‍රති results ල

— කමිල් කියෙව්ස්ව්ස්කි
source

-13

ඔබට ශ්‍රිතය භාවිතා කළ හැකිය:

get.elementbyId();

— ප්‍රත්‍යුෂ් ගෝයාල්
source

3

OP ට අවශ්‍ය වූයේ නමකින් මිස හැඳුනුම්පතෙන් නොවේ. කුමක්ද get.elementbyId()? ඔබ අදහස් කළේ document.getElementById()?

— බාබ්සන්

9

නැත, ඔහු ඉල්ලා සිටින්නේ නමක් අනුව මූලද්‍රව්‍යයක් තෝරා ගැනීමට ය.

— බාබ්සන්

JQuery සමඟ නමකින් මූලද්‍රව්‍යයක් තෝරා ගන්නේ කෙසේද?

කාර්ය සාධනය

නිගමන

විස්තර