ฉันจะเลือกองค์ประกอบตามชื่อด้วย jQuery ได้อย่างไร

1226

มีคอลัมน์ตารางฉันพยายามที่จะขยายและซ่อน:

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

คำถามไม่ตรงกับเนื้อหา ID และชื่อเป็นคุณลักษณะที่แตกต่างกันและถูกเลือกแตกต่างกัน

— ทำเครื่องหมาย W

12

มันผิดกับมาตรฐาน W3C ที่จะมีองค์ประกอบที่มี ID เดียวกัน คือรหัสซ้ำกันคือไม่

— Steve Tauber

2177

คุณสามารถใช้ตัวเลือกคุณลักษณะ 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

เพียงแค่อยากรู้อยากเห็นวิธีการอย่างใดอย่างหนึ่งจะเขียนสิ่งนี้เป็น NOT tcol1 เช่นถ้าพวกเขาต้องการที่จะซ่อนคอลัมน์อื่นนอกเหนือจากคอลัมน์ชื่อ tcol1?

— HPWD

25

@Varun - คุณสามารถละเว้น td ... ตัวอย่างเช่น $ ('[name ^ = tcol]') จะจับคู่องค์ประกอบทั้งหมดที่มีแอตทริบิวต์ 'name' ด้วยค่าที่ขึ้นต้นด้วย 'tcol'

— Jon Erickson

ฉันต้องใช้มันเหมือน $ ('td [name = tcol1]') - โดยไม่มีช่องว่างระหว่าง td และ [] มันคืนค่า NULL ให้ฉัน

— akki

@DougMolineux ที่จริงเขาจะจับคู่ก่อนแก้ไขปัญหาของชื่อ

— mareoraft

7

@HPWD คุณต้องใช้: ไม่ใช่ตัวเลือก$("td:not([name='tcol1'])")ตัวอย่างเช่น คุณสามารถดูได้ที่ซอนี้

— JohannesB

224

สามารถเลือกคุณลักษณะใดก็ได้โดยใช้[attribute_name=value]วิธี ดูตัวอย่างได้ที่นี่ :

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

— user2804791
แหล่งที่มา

แต่คุณควรใช้โค้ดด้านบนเพื่อที่คุณจะได้ไม่พลาดการทดสอบ! ขอให้โชคดีและยินดีต้อนรับสู่ชุมชน Stackoverflow :)

— Afzaal Ahmad Zeeshan

7

นี่ไม่ทำงานอย่างน้อยสำหรับฉัน - แต่ข้อความต่อไปนี้ใช้ได้var value = $("[name=nameofobject]");

— Pranav

2

มันน่าประหลาดใจที่มีผู้

— โหวตเพิ่มขึ้น

6

21 upvotes ตอนนี้ ... บางทีมันอาจจะเป็นเพราะคำตอบคือน้อยกว่าสับสน 'td [ชื่อ = tcol1] โดยเฉพาะอย่างยิ่งตั้งแต่ td ไม่จำเป็นและด้วยเหตุนี้ทำให้คนอย่างผมลงเส้นทางที่ผิด

— คริสปราก

2

ชื่อการป้อนข้อมูลของฉันมี [] <input name="itemid[]">เช่นนี้ ดังนั้นคำตอบนี้ทำงานได้อย่างสมบูรณ์แบบกว่าคำตอบที่ยอมรับขอบคุณการใช้คำพูดที่เหมาะสม

— Sunish Menon

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

ขยายตัวอย่างข้อมูล

— Andreas L.
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

หมายเหตุ: ครั้งเดียวที่คุณจะมีเหตุผลในการใช้แอตทริบิวต์ "name" ควรเป็นช่องทำเครื่องหมายหรืออินพุตวิทยุ

หรือคุณสามารถเพิ่มคลาสอื่นในองค์ประกอบสำหรับการเลือก (นี่คือสิ่งที่ฉันจะทำ)

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>

ขยายตัวอย่างข้อมูล

— Shrikant D
แหล่งที่มา

+1 ตัวอย่างเดียวที่กำหนดซึ่งเลือกฟิลด์ชื่อรวมถึงประเภทและ จำกัด ผลลัพธ์ไว้ในส่วน id

— SharpC

ฉันเห็นด้วย. คุณสามารถมีหลายรูปแบบในหน้าของคุณและการ จำกัด รูปแบบที่เหมาะสมเป็นความคิดที่ดี

— Kar.ma

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

— reltmcd

นี่เป็นเรื่องจริง jQuery เวอร์ชันใหม่กว่า (v. 3.2.1) มีแนวโน้มที่จะล้มเหลวได้มากขึ้นเมื่อพบองค์ประกอบตัวเลือกที่อิงกับคุณลักษณะโดยไม่มีการอ้างอิงที่เหมาะสม

— HoldOffHunger

3

คุณสามารถรับองค์ประกอบใน JQuery โดยใช้แอตทริบิวต์ ID เช่นนี้:

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

— CalebHC
แหล่งที่มา

4

ตรงกับองค์ประกอบเดียวเท่านั้น

— TTT

2

ขอโทษด้วยกับเรื่องนั้น. ทำในสิ่งที่ Ben S พูด

— CalebHC

ใช่ว่าเป็นเรื่องจริงเกี่ยวกับ ID เท่าที่เลือกโดยชื่อฉันคิดว่ามีการโพสต์ขึ้นที่นี่หมายถึง Selectors / attributeEquals ซึ่งเป็นประโยชน์

— TTT

1

อาจจะมีการแก้ไขคำถาม แต่เขากำลังขอการอ้างอิงชื่อในขณะนี้ แต่ใช่องค์ประกอบเดียวสามารถใช้ตัวเลือก id

— nckbrz

คำถามจริงสำหรับชื่อ

— Prathamesh มากกว่า

3

คุณสามารถใช้แอตทริบิวต์ใด ๆ [attribute_name=value]ที่เป็นตัวเลือกด้วย

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

3

โดยส่วนตัวสิ่งที่ฉันทำในอดีตคือการให้รหัสคลาสทั่วไปแก่พวกเขาและใช้สิ่งนั้นเพื่อเลือกพวกเขา มันอาจจะไม่เหมาะเพราะพวกเขามีคลาสที่ระบุซึ่งอาจไม่มีอยู่ แต่มันทำให้การเลือกเป็นเรื่องง่ายขึ้นมาก เพียงให้แน่ใจว่าคุณไม่ซ้ำกันในชื่อคลาสของคุณ

เช่นสำหรับตัวอย่างข้างต้นฉันใช้การเลือกของคุณตามชั้นเรียน ยังดีกว่าคือการเปลี่ยนชื่อคลาสจากตัวหนาเป็น 'tcol1' ดังนั้นคุณจะไม่ได้รับการรวมเข้าไปในผลลัพธ์ jQuery โดยไม่ตั้งใจ หากตัวหนาไม่ได้อ้างถึงคลาส CSS จริงๆคุณสามารถระบุได้ทั้งในคุณสมบัติคลาส - เช่น 'class = "tcol1 bold"'

โดยสรุปหากคุณไม่สามารถเลือกได้ตามชื่อให้ใช้ตัวเลือก jQuery ที่ซับซ้อนและยอมรับประสิทธิภาพการทำงานที่เกี่ยวข้องหรือใช้ตัวเลือกคลาส

คุณสามารถ จำกัด ขอบเขต jQuery ได้ตลอดเวลาโดยรวมชื่อตารางเช่น $ ('# tableID> .bold')

ที่ควร จำกัด jQuery จากการค้นหา "โลก"

ยังสามารถจัดเป็นตัวเลือกที่ซับซ้อนได้ แต่จะ จำกัด การค้นหาใด ๆ ภายในตารางอย่างรวดเร็วด้วย ID ของ '#tableID' ดังนั้นการประมวลผลจึงมีน้อยที่สุด

อีกทางเลือกหนึ่งหากคุณกำลังมองหาองค์ประกอบมากกว่า 1 รายการใน # table1 จะต้องค้นหาแยกต่างหากแล้วส่งไปยัง jQuery เนื่องจากเป็นการ จำกัด ขอบเขต แต่จะบันทึกการประมวลผลเล็กน้อยเพื่อค้นหาแต่ละครั้ง

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

— สตีฟพระเกศา
แหล่งที่มา

ค่อนข้างคำตอบคร่าว ๆ แต่นี่เป็นวิธีการทั่วไปที่ถูกต้อง

— HoldOffHunger

2

อาจจะใช้คำเพียงเล็กน้อย แต่ควรมีคำอธิบายเพิ่มเติมเล็กน้อยและให้เหตุผลตามคำแนะนำมากกว่าบรรทัดเดียวที่อธิบายเพียงเล็กน้อย! ;) มันมีประโยชน์เมื่อมีคนใหม่กับบางสิ่งบางอย่างและพยายามที่จะเข้าใจว่าทำไมก) มันทำงานและข) มันทำงานอย่างไร

— Steve Childs

-13

คุณสามารถใช้ฟังก์ชั่น:

get.elementbyId();

— Pratyush Goyal
แหล่งที่มา

2

OP ต้องการหาชื่อไม่ใช่ id แล้วอะไรget.elementbyId()ล่ะ คุณหมายถึงdocument.getElementById()อะไร

— barbsan

8

ไม่เขากำลังขอให้เลือกองค์ประกอบตามชื่อ

— barbsan