আমি কীভাবে jQuery এর সাথে নাম দিয়ে কোনও উপাদান নির্বাচন করতে পারি?


1224

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

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>

7
প্রশ্ন সামগ্রীর সাথে মেলে না। আইডি এবং নাম পৃথক বৈশিষ্ট্য এবং পৃথকভাবে নির্বাচিত হয়
ডাব্লু

12
একই আইডি সহ উপাদান থাকা ডাব্লু 3 সি মানের বিরুদ্ধে নয়; অর্থাত সদৃশ আইডি হ'ল নং
স্টিভ টাবার

উত্তর:


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
@ ভারুন - আপনি কেবল টিডি বাদ দিতে পারেন ... উদাহরণস্বরূপ $ ('[নাম ^ = tcol]') 'tcol' দিয়ে শুরু হওয়া একটি মানের সাথে 'নাম' একটি বৈশিষ্ট্যযুক্ত সমস্ত উপাদানগুলির সাথে মিলবে
জোন ইরিকসন

আমাকে এটি $ ('td [name = tcol1]') এর মতো ব্যবহার করতে হয়েছিল - টিডি এবং []] এর মধ্যে ফাঁকা জায়গা ছাড়াই এটি আমাকে ন্যুয়াল ফিরিয়ে দেয়।
আক্কি

@ ডগমোলিনাক্স আসলে, তিনি একটি নামের পূর্বের সাথে মিলে যাচ্ছেন ।
mareoraft

7
@HPWD আপনি ব্যবহার করবেন: $("td:not([name='tcol1'])")উদাহরণস্বরূপ নির্বাচক নয় । আপনি এই ফিজলিতে
জোহানেসবি

224

কোনও বৈশিষ্ট্য [attribute_name=value]উপায় ব্যবহার করে নির্বাচন করা যেতে পারে । নমুনা এখানে দেখুন :

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

তবে আপনার উপরের কোডটি ব্যবহার করা উচিত, যাতে আপনি কউটিশনগুলি মিস করেন না! শুভকামনা এবং স্ট্যাকওভারফ্লো সম্প্রদায়কে স্বাগতম
আফজাল আহমদ জিশান

7
এটি আমার পক্ষে কমপক্ষে কাজ করছে না - তবে নিম্নলিখিত বিবৃতিটি কাজ করেvar value = $("[name=nameofobject]");
প্রণব

2
আশ্চর্যজনকভাবে এই 17 টি উত্সাহ পেয়েছে যখন এটি আসল স্বীকৃত উত্তরের 4 বছর পরে এসেছিল
Huangism

6
২১ টি আপভোট এখন ... সম্ভবত এটি কারণ টিডি [নাম = টিসিওল ১] এর চেয়ে কম বিভ্রান্তিকর, কারণ টিডি প্রয়োজন হয় না এবং তাই আমার মতো লোকদেরকে ভুল পথে নামায়
ক্রিস স্প্রেগ

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

ফ্রেমওয়ার্কগুলি সাধারণত ফর্মগুলিতে বন্ধনী নাম ব্যবহার করে :

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



5

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

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

উদাহরণস্বরূপ ক্ষেত্রের নামটি যদি হয়'td[name="nested[fieldName]"]'

এটা খুব সত্য। জিকুয়েরির নতুন সংস্করণ (v। 3.2.1) যথাযথ উদ্ধৃতি না দিয়ে কোনও অ্যাট্রিবিউট-ভিত্তিক নির্বাচক উপাদানটির মুখোমুখি হওয়ার সময় ব্যর্থ হওয়ার সম্ভাবনা অনেক বেশি।
হোল্ডঅফহাঙ্গার

3

আপনি JQuery এর আইডি বৈশিষ্ট্যটি এর মতো ব্যবহার করে উপাদানটি পেতে পারেন:

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

4
শুধুমাত্র একটি একক উপাদানের সাথে মেলে
টিটিটি

2
এর জন্যে দুঃখিত. বেন এস যা বলেছেন তা-ই করুন।
কালেব এইচসি

হ্যাঁ আইডি সম্পর্কে সত্য। যতদূর নাম দ্বারা নির্বাচন করা যায়, আমার মনে হয় এখানে একটি পোস্ট ছিল যা নির্বাচক / গুণাবলীকে উল্লেখ করে যা সহায়ক ছিল।
টিটিটি

1
সম্ভবত প্রশ্নটি সম্পাদনা করা হয়েছে তবে তিনি এখন নাম উল্লেখ করতে চাইছেন তবে হ্যাঁ একক উপাদান আইডি নির্বাচকটি ব্যবহার করতে পারেন
nckbrz

নামটির জন্য প্রশ্নটি
মেঘ

3

আপনি এর সাথে নির্বাচক হিসাবে যে কোনও বৈশিষ্ট্য ব্যবহার করতে পারেন [attribute_name=value]

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

3

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

যেমন উপরের উদাহরণের জন্য আমি শ্রেণি দ্বারা আপনার নির্বাচনটি ব্যবহার করব। ক্লাসের নামটি গা bold় থেকে 'tcol1' এ পরিবর্তন করা আরও ভাল so যদি সাহসী প্রকৃতপক্ষে কোনও সিএসএস শ্রেণিতে উল্লেখ করে তবে আপনি সর্বদা শ্রেণীর সম্পত্তি উভয়ই নির্দিষ্ট করতে পারেন - যেমন 'শ্রেণি = "tcol1 গা bold়"।

সংক্ষেপে, যদি আপনি নাম অনুসারে নির্বাচন করতে না পারেন, হয় জটিল jQuery নির্বাচনকারী ব্যবহার করুন এবং কোনও সম্পর্কিত পারফরম্যান্স হিট করুন বা শ্রেণি নির্বাচকদের ব্যবহার করুন।

আপনি সর্বদা টেবিলের নাম যেমন including ('# টেবিলআইডি>। বোল্ড') অন্তর্ভুক্ত করে 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); 
}

কিছুটা কথার উত্তর, তবে এটি মূলত সঠিক সামগ্রিক পদ্ধতির।
হোল্ডঅফহাঙ্গার

2
কিছুটা কথাবার্তা হতে পারে তবে একটি পরামর্শের পিছনে কিছুটা অতিরিক্ত ব্যাখ্যা এবং যুক্তি যুক্ত করা ভাল যা একটি মাত্র রেখা ব্যাখ্যা করে! ;) এটি দরকারী যখন কেউ কোনও কিছুর জন্য নতুন হন এবং কেন এটি বোঝার চেষ্টা করে) ক) এটি কাজ করে এবং খ) কীভাবে এটি কাজ করে
স্টিভ চাইল্ডস

-12

আপনি ফাংশনটি ব্যবহার করতে পারেন:

get.elementbyId();

2
ওপি আইডি নয়, নাম দিয়ে পেতে চেয়েছিল । আর কী get.elementbyId()? মানে document.getElementById()?
বার্বসান

8
না, তিনি নাম দিয়ে একটি উপাদান নির্বাচন করতে বলছেন।
বার্বসান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.