मैं jQuery के साथ नाम से एक तत्व कैसे चुन सकता हूं?

1224

एक टेबल कॉलम लें, जिसे मैं विस्तार और छिपाने की कोशिश कर रहा हूं:

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>

— TTT
स्रोत

7

प्रश्न सामग्री से मेल नहीं खाता है। आईडी और नाम अलग-अलग विशेषताएं हैं और अलग

— मार्क डब्ल्यू

12

यह W3C मानकों के खिलाफ समान आईडी वाले तत्व है; यानी डुप्लीकेट आईडी नं।

— स्टीव तौबर

2174

आप 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'

— जॉन एरिकसन
स्रोत

1

जिज्ञासा से बाहर, कोई इसे tcol1 के रूप में कैसे लिख सकता है, जैसे कि अगर वे कॉलम tcol1 के अलावा अन्य स्तंभों को छिपाना चाहते हैं, तो क्या होगा?

— HPWD

25

@ वरुण - आप केवल td को छोड़ सकते हैं ... उदाहरण के लिए $ ('[नाम ^ = tcol]') उन सभी तत्वों से मेल खाएगा जिनके पास 'tcol' से शुरू होने वाले मान के साथ एक विशेषता 'नाम' है

— जॉन एरिकसन

मुझे इसे $ ('td [name = tcol1]') की तरह इस्तेमाल करना था - td और [] के बीच की जगह के बिना इसने मुझे NULL लौटा दिया।

— अक्की

@DougMolineux दरअसल, वह एक नाम के प्री फिक्स को मैच कर रहा है ।

— मोराटॉफ़

7

@HPWD आप उपयोग करेंगे: $("td:not([name='tcol1'])")उदाहरण के लिए चयनकर्ता नहीं । आप इसे इस फिडेल

— जोहान्सबाई

224

किसी भी विशेषता का उपयोग करके चुना जा सकता है [attribute_name=value]। नमूना यहाँ देखें :

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

— user2804791
स्रोत

लेकिन आपको उपरोक्त कोड का उपयोग करना चाहिए, ताकि आप 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">

स्निपेट का विस्तार करें

— एंड्रियास एल।
स्रोत

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>

स्निपेट का विस्तार करें

— आपका दोस्त केन
स्रोत

24

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

स्निपेट का विस्तार करें

— श्रीकांत डी
स्रोत

+1 एकमात्र उदाहरण दिया गया है जो एक नाम फ़ील्ड का चयन करता है जिसमें प्रकार शामिल है और एक आईडी सेक्शन के भीतर परिणामों को सीमित करता है।

— 15

मैं सहमत हूँ। आपके पृष्ठ में कई रूप हो सकते हैं, और उचित को सीमित करना एक अच्छा विचार है।

— करमा

15

चौखटे आमतौर पर रूपों में ब्रैकेट नाम का उपयोग करते हैं, जैसे:

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

— itsnikolay
स्रोत

13

मैंने ऐसा किया है और यह काम करता है:

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

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

— kscius
स्रोत

5

यहाँ एक सरल उपाय है: $('td[name=tcol1]')

— अतिथि
स्रोत

5

आप उद्धरण का दूसरा सेट भूल गए, जो स्वीकृत उत्तर को गलत बनाता है:

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

— क्रिस जे
स्रोत

उदाहरण के लिए, यदि फ़ील्ड का नाम है'td[name="nested[fieldName]"]'

— 23

यह एकदम सच है। JQuery के नए संस्करण (v। 3.2.1) उचित उद्धरण के बिना विशेषता-आधारित चयनकर्ता तत्व का सामना करते समय विफल होने की अधिक संभावना है।

— होल्डऑफ ह्यूंगर

3

आप इस तरह इसकी आईडी विशेषता का उपयोग करके JQuery में तत्व प्राप्त कर सकते हैं:

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

— CalebHC
स्रोत

4

केवल एक तत्व से मेल खाता है

— TT10

2

उसके लिए माफ़ करना। बस वही करो जो बेन एस ने कहा था।

— CalebHC

हां, यह आईडी के बारे में सच है। जहाँ तक नाम से चयन करने की बात है, मुझे लगता है कि यहाँ एक पोस्ट थी जिसमें चयनकर्ताओं / विशेषताओं का उल्लेख था जो सहायक था।

— TTT

1

हो सकता है कि प्रश्न को संपादित कर दिया गया हो, लेकिन वह अब नाम के संदर्भ के लिए पूछ रहा है, लेकिन हाँ एकल तत्व आईडी चयनकर्ता का उपयोग कर सकते हैं

— nckbrz

प्रश्न वास्तव में नाम के लिए

— प्रथमेश मोर

3

आप चयनकर्ता के रूप में किसी भी विशेषता का उपयोग कर सकते हैं [attribute_name=value]।

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

3

व्यक्तिगत रूप से, मैंने अतीत में जो किया है, वह उन्हें एक सामान्य वर्ग आईडी देता है और उनका उपयोग करता है। यह आदर्श नहीं हो सकता क्योंकि उनके पास एक वर्ग निर्दिष्ट है जो मौजूद नहीं हो सकता है, लेकिन यह चयन को बहुत आसान बनाता है। बस सुनिश्चित करें कि आप अपने वर्ग के नामों में अद्वितीय हैं।

ऊपर दिए गए उदाहरण के अनुसार, मैं आपके चयन को कक्षा द्वारा उपयोग करूँगा। बेहतर अभी भी वर्ग के नाम को बोल्ड से 'tcol1' में बदलना होगा, इसलिए आपको jQuery के परिणामों में कोई आकस्मिक समावेश नहीं मिलेगा। यदि बोल्ड वास्तव में सीएसएस वर्ग को संदर्भित करता है, तो आप हमेशा क्लास की संपत्ति में दोनों को निर्दिष्ट कर सकते हैं - अर्थात 'क्लास = "tcol1 बोल्ड"।

सारांश में, यदि आप नाम से चयन नहीं कर सकते हैं, तो या तो एक जटिल jQuery चयनकर्ता का उपयोग करें और किसी भी संबंधित प्रदर्शन को स्वीकार करें या कक्षा चयनकर्ताओं का उपयोग करें।

आप हमेशा टेबल नाम अर्थात $ ('# टेबलआईडी> .बोल्ड' को शामिल करके jQuery के दायरे को सीमित कर सकते हैं।

यह "दुनिया" की खोज से jQuery को प्रतिबंधित करना चाहिए।

यह अभी भी एक जटिल चयनकर्ता के रूप में वर्गीकृत किया जा सकता है, लेकिन यह '#tableID' की आईडी के साथ तालिका के भीतर किसी भी खोज को जल्दी से बाधित करता है, इसलिए प्रसंस्करण को न्यूनतम रखता है।

इसका एक विकल्प यदि आप # टेबल 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); 
}

— स्टीव चिल्ड्स
स्रोत

कुछ हद तक चिंताजनक उत्तर है, लेकिन यह मौलिक रूप से सही समग्र दृष्टिकोण है।

— होल्डऑफ ह्यूंगर

2

थोड़ा चिंतित हो सकता है, लेकिन एक छोटी सी व्याख्या की तुलना में थोड़ा अतिरिक्त स्पष्टीकरण और तर्क के पीछे तर्क देना बेहतर होता है! ;) यह तब उपयोगी होता है जब कोई व्यक्ति किसी चीज के लिए नया होता है और यह समझने की कोशिश करता है कि क) यह काम करता है और ख) यह कैसे काम करता है

— स्टीव चिल्ड

-13

आप फ़ंक्शन का उपयोग कर सकते हैं:

get.elementbyId();

— प्रत्यूष गोयल
स्रोत

2

ओपी नाम से नहीं, आईडी से पाना चाहता था । और क्या है get.elementbyId()? क्या आपका मतलब था document.getElementById()?

— बार्बसन

8

नहीं, वह नाम से एक तत्व का चयन करने के लिए कह रहा है।

— बार्बसन