javascript - আমি কিভাবে jQuery দিয়ে নামের দ্বারা একটি উপাদান নির্বাচন করতে পারেন?




html dom (10)

একটি টেবিল কলাম আছে আমি প্রসারিত এবং লুকানোর চেষ্টা করছি:

যখন আমি class দ্বারা এটি নির্বাচন করি তবে উপাদানটির name নয় তখন 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>

আপনি 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 এ নাম উপাদান ব্যবহার করে একটি ইনপুট ক্ষেত্র থেকে নাম মান পেতে পারেন:

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>


আপনি উদ্ধৃতি দ্বিতীয় সেট ভুলে গেছেন, যা গ্রহণযোগ্য উত্তরটি ভুল করে তোলে:

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


এখানে একটি সহজ সমাধান: $('td[name=tcol1]')


ব্যক্তিগতভাবে, আমি অতীতে যা করেছি তা তাদের একটি সাধারণ শ্রেণী আইডি দেয় এবং তাদের নির্বাচন করার জন্য ব্যবহার করা হয়। এটি আদর্শ হতে পারে না কারণ তাদের এমন একটি শ্রেণী রয়েছে যা অস্তিত্ব নেই, তবে এটি নির্বাচনকে অনেক সহজ করে তোলে। শুধু আপনার ক্লাসের মধ্যে অনন্য আপনি নিশ্চিত হন।

অর্থাৎ উপরের উদাহরণের জন্য আমি ক্লাসের মাধ্যমে আপনার নির্বাচনটি ব্যবহার করব। শ্রেণিকর থেকে 'টোকল 1' থেকে শ্রেণির নামটি পরিবর্তন করা আরও ভাল হবে, তাই আপনি jQuery ফলাফলগুলিতে কোনও আকস্মিক অন্তর্ভুক্তি পাবেন না। যদি গাঢ়ভাবে কোনও CSS শ্রেণির উল্লেখ করে তবে আপনি সর্বদা শ্রেণির সম্পত্তি উভয়টি উল্লেখ করতে পারেন - অর্থাৎ '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">


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>

এই কোডটি সহায়ক হতে পারে।








jquery-selectors