สัญลักษณ์แทนในตัวเลือก jQuery

668

ฉันพยายามใช้ไวด์การ์ดเพื่อรับรหัสขององค์ประกอบทั้งหมดที่รหัสขึ้นต้นด้วย "jander" ฉันพยายาม$('#jander*'), $('#jander%')แต่มันไม่ทำงาน ..

ฉันรู้ว่าฉันสามารถใช้คลาสขององค์ประกอบเพื่อแก้ไข แต่ก็เป็นไปได้ด้วยการใช้สัญลักษณ์แทน?

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

jquery jquery-selectors sizzle

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

2

นี่เป็นคำถามเกี่ยวกับ jQuery (หรือมากกว่านั้นคือ Sizzle engine)

— Peter Örneholm

1

เพียงแค่ทราบ: มันจะเร็วกว่าที่จะทำกับคลาสที่ jQuery หรือ Sizzle สามารถใช้ประโยชน์จากฟังก์ชั่นเบราว์เซอร์ (ไม่ควรสร้างความแตกต่างมากสำหรับเบราว์เซอร์สมัยใหม่)

— เฟลิกซ์คลิง

4

ซ้ำซ้อนที่เป็นไปได้ของนิพจน์ทั่วไป

— Robert MacLean

7

นอกจากนี้สิ่งสำคัญที่ควรทราบก็คือ$("[id*=jander]")จะเลือกองค์ประกอบทั้งหมดที่มี ID ที่มีสตริง jander

— Gabriel Ryan Nahmias

1279

เพื่อให้องค์ประกอบทั้งหมดเริ่มต้นด้วย "jander" คุณควรใช้:

$("[id^=jander]")

เพื่อให้ผู้ที่ลงท้ายด้วย "jander"

$("[id$=jander]")

ดูเอกสารประกอบ JQuery

— นิโก้
แหล่งที่มา

22

เอกสารให้ตัวอย่างนี้:$('input[name^="news"]').val('news here!')

— Brenden

5

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

— โก้

4

@nico น่าสนใจพอเอกสารบอกว่ามันใช้งานได้กับคุณสมบัติและidเป็นคุณสมบัติทางเทคนิคแต่ฉันเดาว่าด้วย jquery รุ่นล่าสุด (เช่น 1.9) และวิธีการเปลี่ยนแปลงคุณสมบัติและคุณสมบัติล่าสุดของบรรทัดนั้นเบลอเล็กน้อย ด้วยความเคารพทั้งสองและเพื่อให้คุณสามารถใช้คุณสมบัติตัวเลือกคุณสมบัติ (อย่างน้อยบางส่วน)

— johnt Entrepreneur

จะทำอย่างไรถ้าฉันต้องการเลือกคู่ของตัวเลือกเหล่านั้น ตัวอย่างเช่น: ฉันมี.col-lg-4:even div:nth-child(1)ถ้าฉันต้องการที่จะทำเช่นเดียวกัน .... ฉันจะเขียนอะไร? "[class^=.col-lg-]:even"? (ฉันดูเหมือนจะไม่ทำงาน)

— Luis Robles

พฤติกรรมเล็กน้อยที่ทำให้ฉันประหลาดใจ ---- ถ้าฉันใช้สิ่งนี้กับ "class $ = ... " มันจะค้นหารายการคลาสของรายการไม่ใช่ชื่อคลาสแต่ละรายการ ดังนั้นมันจะฮิตก็ต่อเมื่อคลาสที่ค้นหานั้นเป็นคลาสสุดท้ายของรายการนั้น ยังไม่ได้ทดสอบนอกจาก Chrome และไม่แน่ใจว่ามีข้อบกพร่องใน jQuery หรือตามความคาดหวังของฉันของ jQuery

— Roger Krueger

115

เนื่องจากชื่อแนะนำให้ใช้ wildcard คุณสามารถใช้สิ่งนี้:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

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

idนี้จะเลือกได้ทุกสตริงที่กำหนดใน

— Martijn Smidt
แหล่งที่มา

39

ลอง jQuery เริ่มต้นด้วย

ตัวเลือก '^ =' เช่น

[id^="jander"]

ฉันต้องถามว่าทำไมคุณไม่ต้องการทำสิ่งนี้โดยใช้คลาส?

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

2

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

— Christian Mann

สิ่งนี้มีประโยชน์เมื่อทำงานกับ ASP.Net WebForms โดยเฉพาะรายการวิทยุและช่องทำเครื่องหมาย

— DavidScherer

35

สำหรับชั้นเรียนที่คุณสามารถใช้:

div[class^="jander"]

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

ฉันไม่สามารถทำงานนี้ได้รับข้อความเกี่ยวกับไวยากรณ์ที่ไม่ถูกต้อง

— stian

14

วิธีรับรหัสจากการจับคู่ไวด์การ์ด:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>

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

— PJ Brunet
แหล่งที่มา

2

แทนที่จะเป็น "event.target.id" สิ่งนี้อาจใช้ได้เช่นกัน: $ (this) .attr ("id")

— PJ Brunet

10

เมื่อคุณมีสตริง id ที่ซับซ้อนยิ่งขึ้นการเสนอราคาซ้ำเป็นสิ่งจำเป็น

ตัวอย่างเช่นหากคุณมี ID เช่นนี้: id="2.2"วิธีที่ถูกต้องในการเข้าถึงคือ:$('input[id="2.2"]')

ใช้เครื่องหมายคำพูดสองเท่าให้มากที่สุดเพื่อความปลอดภัย

— เอดูอาร์
แหล่งที่มา