Làm cách nào để chọn một phần tử theo tên với jQuery?

1227

Có một cột bảng tôi đang cố gắng mở rộng và ẩn:

jQuery dường như ẩn các tdphần tử khi tôi chọn nó theo lớp chứ không phải theo tên của phần tử .

Ví dụ: tại sao:

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

Lưu ý HTML bên dưới, cột thứ hai có cùng tên cho tất cả các hàng. Làm thế nào tôi có thể tạo bộ sưu tập này bằng cách sử dụng namethuộc tính?

<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
nguồn

7

Câu hỏi không phù hợp với nội dung. ID và tên là các thuộc tính khác nhau và được chọn khác nhau

— Đánh dấu

12

Nó chống lại các tiêu chuẩn W3C để có các yếu tố có cùng ID; tức là ID trùng lặp là không.

— Steve Tauber

2178

Bạn có thể sử dụng bộ chọn thuộc tính 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'

— Jon Erickson
nguồn

1

Vì tò mò, làm thế nào người ta viết cái này là KHÔNG tcol1, như thế nào nếu họ muốn ẩn các cột khác với các cột có tên, tcol1?

— HPWD

25

@Varun - bạn chỉ có thể bỏ qua td ... ví dụ $ ('[name ^ = tcol]') sẽ khớp với tất cả các thành phần có thuộc tính 'name' với giá trị bắt đầu bằng 'tcol'

— Jon Erickson

Tôi đã phải sử dụng nó như $ ('td [name = tcol1]') - không có khoảng cách giữa td và [] nó trả lại cho tôi NULL.

— akki

@DougMolineux Trên thực tế, anh ấy phù hợp với bản sửa lỗi trước của một tên.

— mareoraft

7

@HPWD bạn sẽ sử dụng: không chọn, $("td:not([name='tcol1'])")ví dụ. Bạn có thể nhìn thấy nó tại fiddle này

— JohannesB

224

Bất kỳ thuộc tính có thể được chọn bằng [attribute_name=value]cách sử dụng . Xem mẫu tại đây :

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

— người dùng2804791
nguồn

nhưng bạn nên sử dụng đoạn mã trên, để bạn không bỏ lỡ các phần mở rộng! Chúc may mắn và chào mừng đến với cộng đồng Stackoverflow :)

— Afzaal Ahmad Zeeshan

7

Điều này ít nhất không hoạt động đối với tôi - Nhưng tuyên bố sau đây hoạt độngvar value = $("[name=nameofobject]");

— Pranav

2

Thật đáng ngạc nhiên khi nhận được 17 lượt upvote khi điều này diễn ra 4 năm sau câu trả lời được chấp nhận ban đầu

— Huangism

6

21 upvote bây giờ ... có thể là vì câu trả lời ít gây nhầm lẫn hơn 'td [name = tcol1]', đặc biệt vì td không bắt buộc và do đó dẫn những người như tôi đi sai đường

— Chris Sprague

2

Tên đầu vào của tôi có [] như thế này : <input name="itemid[]">. Vì vậy, câu trả lời này hoạt động hoàn hảo hơn câu trả lời được chấp nhận, nhờ vào cách sử dụng dấu ngoặc kép đúng cách.

— Sunish Menon

62

Nếu bạn có một cái gì đó như:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Bạn có thể đọc tất cả như thế này:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

Đoạn trích:

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

Mở rộng đoạn trích

— Andreas L
nguồn

26

Bạn có thể lấy mảng các phần tử theo tên theo cách cũ và chuyển mảng đó sang 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>

Mở rộng đoạn trích

lưu ý: lần duy nhất bạn có lý do để sử dụng thuộc tính "name" là cho hộp kiểm hoặc đầu vào radio.

Hoặc bạn chỉ có thể thêm một lớp khác vào các thành phần để lựa chọn. (Đây là những gì tôi sẽ làm)

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>

Mở rộng đoạn trích

— Bạn của bạn Ken
nguồn

24

Bạn có thể nhận giá trị tên từ trường nhập bằng phần tử tên trong jQuery bằng cách:

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>

Mở rộng đoạn trích

— Shrikant D
nguồn

+1 Ví dụ duy nhất được đưa ra sẽ chọn trường tên bao gồm loại và giới hạn kết quả trong phần id.

— SharpC

Tôi đồng ý. Bạn có thể có nhiều biểu mẫu trong trang của mình và giới hạn ở dạng thích hợp là một ý tưởng hay.

— Kar.ma

15

Các khung thường sử dụng tên ngoặc trong các biểu mẫu, như:

<input name=user[first_name] />

Họ có thể được truy cập bởi:

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

— itnikolay
nguồn

13

Tôi đã làm như thế này và nó hoạt động:

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

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

— kscius
nguồn

6

Bạn đã quên bộ dấu ngoặc kép thứ hai, làm cho câu trả lời được chấp nhận không chính xác:

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

— Chris J
nguồn

ví dụ: nếu tên trường là'td[name="nested[fieldName]"]'

— Reltmcd

Thật là quá đúng. Các phiên bản mới hơn của jQuery (v. 3.2.1) có nhiều khả năng thất bại hơn khi gặp phần tử chọn dựa trên thuộc tính mà không có trích dẫn thích hợp.

— Hold OfferHunger

5

Đây là một giải pháp đơn giản: $('td[name=tcol1]')

— Khách mời
nguồn

3

Bạn có thể lấy phần tử trong JQuery bằng cách sử dụng thuộc tính ID của nó như thế này:

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

— CalebHC
nguồn

4

Chỉ khớp với một yếu tố duy nhất

— TTT

2

Xin lỗi vì điều đó. Chỉ cần làm những gì Ben S nói.

— CalebHC

Vâng, đó là sự thật về ID. Theo như lựa chọn theo tên, tôi nghĩ rằng có một bài đăng ở đây đề cập đến Selector / propertyEquals rất hữu ích.

— TTT

1

Có thể câu hỏi đã được chỉnh sửa, nhưng anh ấy hiện đang yêu cầu tham khảo tên, nhưng có các yếu tố đơn lẻ có thể sử dụng bộ chọn id

— nckbrz

Câu hỏi thực sự cho tên

— Prathamesh Thêm

3

Bạn có thể sử dụng bất kỳ thuộc tính nào như bộ chọn với [attribute_name=value].

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

3

Cá nhân, những gì tôi đã làm trong quá khứ là cung cấp cho họ một id lớp chung và sử dụng nó để chọn chúng. Nó có thể không lý tưởng vì chúng có một lớp được chỉ định có thể không tồn tại, nhưng nó làm cho việc lựa chọn trở thành một địa ngục dễ dàng hơn rất nhiều. Chỉ cần chắc chắn rằng bạn là duy nhất trong tên lớp của bạn.

tức là ví dụ trên tôi sẽ sử dụng lựa chọn của bạn theo lớp. Vẫn tốt hơn là thay đổi tên lớp từ in đậm thành 'tcol1', vì vậy bạn không nhận được bất kỳ sự vô tình nào trong kết quả jQuery. Nếu in đậm thực sự đề cập đến một lớp CSS, bạn luôn có thể chỉ định cả hai trong thuộc tính lớp - tức là 'class = "tcol1 bold"'.

Tóm lại, nếu bạn không thể chọn theo Tên, hãy sử dụng bộ chọn jQuery phức tạp và chấp nhận bất kỳ lần nhấn hiệu suất liên quan nào hoặc sử dụng bộ chọn Lớp.

Bạn luôn có thể giới hạn phạm vi jQuery bằng cách bao gồm tên bảng tức là $ ('# tableID> .bold')

Điều đó sẽ hạn chế jQuery tìm kiếm "thế giới".

Nó vẫn có thể được phân loại là một bộ chọn phức tạp, nhưng nó nhanh chóng hạn chế mọi tìm kiếm trong bảng với ID '#tableID', do đó giữ cho việc xử lý ở mức tối thiểu.

Một cách khác nếu bạn đang tìm kiếm nhiều hơn 1 phần tử trong # bảng1 sẽ là tìm riêng phần này và sau đó chuyển nó cho jQuery vì điều này giới hạn phạm vi, nhưng tiết kiệm một chút xử lý để tìm kiếm mỗi lần.

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

— Steve Childs
nguồn

Một số câu trả lời dài dòng, nhưng về cơ bản đây là cách tiếp cận tổng thể chính xác.

— Hold OfferHunger

2

Có thể hơi dài dòng, nhưng tốt hơn là có thêm một chút giải thích và lý luận đằng sau một đề nghị hơn là một dòng giải thích ít! ;) Nó hữu ích khi ai đó chưa quen với một thứ gì đó và cố gắng hiểu tại sao a) nó hoạt động và b) nó hoạt động như thế nào

— Steve Childs

-13

Bạn có thể sử dụng chức năng:

get.elementbyId();

— Pratyush G lòng
nguồn

2

OP muốn lấy theo tên chứ không phải id. Và là get.elementbyId()gì? Ý bạn là document.getElementById()sao

— barbsan

8

Không, anh ta yêu cầu chọn một yếu tố theo tên.

— barbsan