ตัวเลือก jQuery: รหัสลงท้ายด้วยหรือไม่

393

มีselectorที่ฉันสามารถค้นหาองค์ประกอบที่มี ID ที่ลงท้ายด้วยสตริงที่กำหนดหรือไม่

ว่าฉันมีองค์ประกอบที่มี ID ctl00$ContentBody$txtTitleของ ฉันจะได้รับสิ่งนี้โดยผ่านเพียงแค่txtTitle?

jquery jquery-selectors

— Josh Stodola
แหล่งที่มา

16

ID หน้าหลักเก่าที่ดีที่สร้างความสับสน!

— Matthew Lock

1

ตั้งClientIDMode=staticจาก ASP.Net 4.0 เป็นต้นไปและกำจัดสิ่งนี้ :)

— Murali Murugesan

1

ClientIDMode = static จะไม่ทำงานสำหรับผู้ที่พยายามหาองค์ประกอบใน repeater!

— สจวร์

629

หากคุณทราบประเภทองค์ประกอบแล้ว: (เช่น: แทนที่ 'องค์ประกอบ' ด้วย 'div')

$("element[id$='txtTitle']")

หากคุณไม่ทราบประเภทองค์ประกอบ:

$("[id$='txtTitle']")

มีข้อมูลเพิ่มเติม

แสดงตัวอย่างโค้ด

// the old way, needs exact ID: document.getElementById("hi").value = "kk";
$(function() {
  $("[id$='txtTitle']").val("zz");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ctl_blabla_txtTitle" type="text" />

Expand snippet

— มาร์คฮูร์ด
แหล่งที่มา

10

ฉันจะค้นหาว่าลงท้ายด้วย '$ txtTitle' มันมีความเสี่ยงไม่มากนักกับคำนำหน้า 'txt' แต่ถ้าคุณเลือกเป็น 'NameTextBox' มันจะตรงกับ 'NameTextBox', 'FirstNameTextBox', LastNameTextBox ', ฯลฯ

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

11

ผู้ใช้ที่ไม่ระบุชื่อเพิ่งพยายามแก้ไขสิ่งต่อไปนี้การเพิ่มเป็นความคิดเห็น (ดูเหมือนสมเหตุสมผล): สิ่งนี้ไม่ได้ให้องค์ประกอบที่ลงท้ายด้วย id txtTitle นี่คือเอกสาร: api.jquery.com/element-selector .. ตัวเลือกองค์ประกอบเทียบเท่ากับ getElementsByTagName มันไม่มีอะไรเกี่ยวข้องกับ id ขององค์ประกอบ หากคุณต้องการเข้าถึงองค์ประกอบที่ลงท้ายด้วย id ให้ใช้ไวยากรณ์นี้ $ ("[id $ = 'txtTitle']") "หรือถ้าคุณรู้ประเภทขององค์ประกอบ ..eg div .. จากนั้นใช้ไวยากรณ์นี้ $ (" div [id $ = 'txtTitle'] ")

— Pekka

1

ลิงค์มีประโยชน์มาก ไม่ใช่หน้ามันมันเอง แต่มันแยกออกเป็น 2 หน้าเพิ่มเติมซึ่งฉันต้องการ ฉันเรียนรู้วิธีจับภาพกลุ่มของชื่อเรื่องเช่นถ้า ID ปรากฏเป็น "masterPage1_Control0_MyTableName_moreStuff" ในแหล่งข้อมูลดูฉันสามารถล็อคลงในตารางของฉัน <asp: Table ID = "MyTable" ... โดยใช้ $ ("id * = MyTable] ") ลองคิดดูฉันชอบ id $ ดีกว่า อืม ...

— ลูคัส

document.getElementById("f:fTest:j_idt51:0:inpTest")นี้พบว่าองค์ประกอบ $("[id$='inpTest']")นี้ไม่ได้ เป็นเพราะโคลอนไม่ได้รับอนุญาตใน ID (แต่ JSF เพิ่ม!)?

— Panu Haaramo

มีวิธีใช้ตัวเลือกนี้กับ CSS เช่นตัวเลือกหลอกหรือไม่?

— Alejandro Nava

250

คำตอบของคำถามคือ$("[id$='txtTitle']"), มาร์ค Hurd ตอบแต่สำหรับผู้ที่ชอบก็ต้องการที่จะหาองค์ประกอบทั้งหมดที่มี ID ซึ่งเริ่มต้นด้วยสตริงที่กำหนด (เช่น txtTitle) ลองนี้ ( doc ):

$("[id^='txtTitle']")

หากคุณต้องการเลือกองค์ประกอบที่ id มีสตริงที่กำหนด ( doc ):

$("[id*='txtTitle']")

หากคุณต้องการเลือกองค์ประกอบที่ id ไม่ใช่สตริงที่ระบุ ( doc ):

$("[id!='myValue']")

(มันยังตรงกับองค์ประกอบที่ไม่มีแอตทริบิวต์ที่ระบุ)

หากคุณต้องการเลือกองค์ประกอบที่ id มีคำที่กำหนดคั่นด้วยช่องว่าง ( doc ):

$("[id~='myValue']")

หากคุณต้องการเลือกองค์ประกอบที่เป็น เท่ากับสตริงที่กำหนดหรือเริ่มต้นด้วยสตริงนั้นตามด้วยยัติภังค์ ( doc ):

$("[id|='myValue']")

— Romain Guidoux
แหล่งที่มา

หากคุณเพิ่มเข้าไปในคำถามที่ตอบคำถามเช่น $ ("[id $ = 'txtTitle']") "และใส่ไว้ในรายการที่ฉันต้องการโหวตคำตอบของคุณ ฉันไม่สามารถทำได้ในขณะนี้เพราะคุณไม่ตอบคำถาม

— Alan Macdonald

2

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

— Romain Guidoux

1

@RomainGuidoux มีความยุติธรรมพอที่จะโทรหาคุณ แต่ฉันไม่ตอบคำตอบที่ไม่ได้นำเสนอวิธีการแก้ปัญหาสำหรับคำถามที่ถามเพราะมันไม่ชัดเจนสำหรับมือใหม่ที่ประสบปัญหาเดียวกับ OP หากพวกเขามาที่หน้าเว็บ โหวตให้คำตอบที่ไม่แม้แต่จะตอบคำถาม หากคุณเปลี่ยนเพื่อตอบคำถามฉันจะถอนคำตอบของคุณแทนที่จะเป็นคำตอบที่ยอมรับเพราะเป็นคำตอบที่มีประโยชน์กว่า อีเธอร์ที่ควรได้รับความเห็นเกี่ยวกับคำตอบที่ได้รับการยอมรับมากกว่าคำตอบของคำถาม

— Alan Macdonald

1

@ AlanMacdonald เรียบร้อยแล้วคุณทำให้ฉันเชื่อมั่น

— Romain Guidoux

33

ลอง

$("element[id$='txtTitle']");

แก้ไข: 4 วินาทีล่าช้า: P

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

32

$('element[id$=txtTitle]')

ไม่จำเป็นอย่างยิ่งที่จะต้องอ้างถึงส่วนของข้อความที่คุณจับคู่

— Scott Evernden
แหล่งที่มา

2

นี่ควรเป็นคำตอบที่ถูกต้อง! การใช้ "และ" ทำให้เกิดความสับสนเท่านั้น

— Kees C. Bakker

13

การเพิ่มเครื่องหมายขีดล่างหรือ $ ให้กับคำที่คุณค้นหาปลอดภัยกว่าจึงมีความเป็นไปได้น้อยที่จะจับคู่องค์ประกอบอื่น ๆ ที่ลงท้ายด้วย ID เดียวกัน:

$("element[id$=_txtTitle]")

(ที่องค์ประกอบคือประเภทขององค์ประกอบที่คุณกำลังพยายามที่จะหา - เช่นdiv, inputฯลฯ

(หมายเหตุคุณแนะนำให้ ID ของคุณมักจะมีเครื่องหมาย $ ในพวกเขา แต่ฉันคิดว่าตอนนี้. NET 2 มีแนวโน้มที่จะใช้ขีดเส้นใต้ใน ID แทนดังนั้นตัวอย่างของฉันจึงใช้เครื่องหมายขีดล่าง)

— นิคกิลเบิร์ต
แหล่งที่มา

1

ใช่คุณถูก. คุณสมบัติ ID ใช้ขีดล่าง ชื่อคุณสมบัติใช้เครื่องหมายดอลลาร์

— Josh Stodola

3

ตัวอย่าง: เพื่อเลือกทั้งหมด<a>ที่มี ID ที่ลงท้ายด้วย _edit:

jQuery("a[id$=_edit]")

หรือ

jQuery("a[id$='_edit']")

— แอนตันเค
แหล่งที่มา

3

เนื่องจากนี่คือ ASP.NET คุณสามารถใช้แท็ก ASP <% =%> เพื่อพิมพ์ ClientID ที่สร้างขึ้นของ txtTitle:

$('<%= txtTitle.ClientID %>')

สิ่งนี้จะส่งผลให้ ...

$('ctl00$ContentBody$txtTitle')

... เมื่อหน้าถูกแสดงผล

หมายเหตุ: ใน Visual Studio Intellisense จะตะโกนใส่แท็ก ASP ใน JavaScript คุณสามารถละเว้นสิ่งนี้ได้เนื่องจากผลลัพธ์คือ JavaScript ที่ถูกต้อง

— ไมเคิล
แหล่งที่มา

4

สหกรณ์ไม่ได้มี'ctl00$ContentBody$txtTitle'เขามี'txtTitle', และคุณจะหายไปชั้นนำ#เพื่อให้ตรงกับรหัส แต่ OP ได้ปฏิเสธคำแนะนำที่คล้ายกัน (ตั้งแต่ลบ): มันจะไม่ทำงานเว้นแต่ฉันจะใส่ Javascript ของฉันโดยตรงในมาร์กอัปซึ่งเป็นฝันร้ายขององค์กร การแยกพฤติกรรมเป็นสิ่งสำคัญสำหรับโครงการนี้

— Martijn Pieters

1

ลองสิ่งนี้:

<asp:HiddenField ID="0858674_h" Value="0" runat="server" />

var test = $(this).find('[id*="_h"').val();

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

0

เพื่อหารหัส iframe ที่ลงท้ายด้วย "iFrame" ในหน้าเว็บที่มี iframe จำนวนมาก

jQuery(document).ready(function (){     
                  jQuery("iframe").each(function(){                     
                    if( jQuery(this).attr('id').match(/_iFrame/) ) {
                            alert(jQuery(this).attr('id'));

                     }                   
                  });     
         });

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