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




html dom (10)

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

जब मैं class द्वारा इसे चुनता हूं लेकिन तत्व के name नहीं तो jQuery td तत्वों को छिपाने लगता है।

उदाहरण के लिए, क्यों करता है:

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

नीचे दिए गए एचटीएमएल पर ध्यान दें, दूसरे कॉलम में सभी पंक्तियों के लिए एक ही नाम है। 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>

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

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

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

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

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

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

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

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

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

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

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

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

आप टेबल नाम यानी $ ('# tableID> .bold') सहित 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); 
}

यदि आपके पास कुछ ऐसा है:

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


यहां एक सरल समाधान है: $('td[name=tcol1]')


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

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

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>






jquery-selectors