jQuery ค้นหาองค์ประกอบหลักแรกที่มีคำนำหน้าคลาสเฉพาะ

124

ฉันต้องการรับผู้ปกครองคนแรกที่มีคำนำหน้าคลาสเฉพาะสมมติว่า:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

ตัวอย่างเช่นองค์ประกอบปัจจุบันของฉันคือ#dividและฉันต้องการค้นหาองค์ประกอบแรกที่มีคำนำหน้าคลาส div-a โดยพื้นฐานแล้วมันจะเลือก:

<div class="div-a89892">

jquery jquery-selectors

— การเดินทางข้ามเวลา
แหล่งที่มา

หยุด. ใช้หลายชั้นเรียนแทนที่จะรวมข้อมูลเป็นชั้นเดียว ตัวเลือก "การจับคู่" ทำงานช้าและการออกแบบนี้ไม่ได้ปรับขนาดสำหรับการแก้ไขใด ๆ แล้วให้กฎระเบียบสำหรับการ<div class='a'> div.aฉันไม่รู้ว่าทำไมคุณถึงใส่divชื่อคลาสเลยจริงๆ

— Stefan Kendall

ถึงกระนั้นอย่ารวมข้อมูลเป็นคำนำหน้าชั้นเรียน นี่เป็นรูปแบบที่แย่มากและสามารถแก้ไขได้อย่างง่ายดายกับหลายชั้นเรียน

— Stefan Kendall

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

— Nerdmaster

คำตอบ:

222

ใช้.closest()กับตัวเลือก:

var $div = $('#divid').closest('div[class^="div-a"]');

— แมตต์บอล
แหล่งที่มา

BTW ไม่รู้ว่าทำไมถึงถูกลดคะแนน ตัวเลือกคำนำหน้าคลาสมีความเปราะ แต่จะใช้งานได้

— Matt Ball

ถึง OP: ตรวจสอบให้แน่ใจว่าองค์ประกอบที่คุณกำลังมองหานั้นเป็นพาเรนต์ที่อยู่ในโครงสร้าง DOM ไม่ใช่พี่น้องหรือคล้ายกับวัตถุที่คุณกำลังมองหา (ตามเอกสารประกอบ) ไม่ใช่ "ใกล้ที่สุดในเอกสาร" แต่เป็น "ใกล้เคียงที่สุดโดยการสร้างโครงสร้าง DOM"

— Christian P.

ไม่ได้ผลสำหรับฉัน นอกจากนี้ฉันต้องการค้นหาองค์ประกอบแรกที่มีคำนำหน้าเฉพาะที่ไม่จำเป็นต้องเป็นองค์ประกอบ div

— Time Travel

@Time จากนั้นลบdivตัวเลือกองค์ประกอบ: $('#divid').closest('[class^="div-a"]'). ตามที่ @Stefan แสดงความคิดเห็นคุณควรใช้หลายคลาส

— Matt Ball

ตัวเลือกนี้ใช้จำนวนรอบที่ไร้สาระ (แต่ก็ยังเร็วได้) หากคุณต้องการรองรับ IE6, IE7 หรือ IE8 สิ่งนี้อาจทำให้คุณเสียหายได้หาก DOM ของคุณมีขนาดใหญ่เกินไป IE จะแสดงกล่องโต้ตอบ "script is not response" เมื่อมีการดำเนินการคำสั่ง JS VM จำนวนหนึ่งและหลังจากนั้นไม่นาน ฉันเคยเห็นสคริปต์ที่สมบูรณ์ใน 0.1ms Internet Explorer ผิดพลาดด้วยเหตุผลนี้

— Stefan Kendall

Jquery อนุญาตให้คุณค้นหาผู้ปกครองด้วย.parents()วิธีการนี้ในภายหลัง

ดังนั้นฉันขอแนะนำให้ใช้:

var $div = $('#divid').parents('div[class^="div-a"]');

สิ่งนี้ทำให้โหนดแม่ทั้งหมดตรงกับตัวเลือก ในการรับผู้ปกครองคนแรกที่ตรงกับตัวเลือกให้ใช้:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

สำหรับคำสั่งอื่น ๆ DOM สำรวจเส้นทางดังกล่าวให้ตรวจสอบเอกสารในtraversing DOM

— ซันนี่อาร์คุปตะ
แหล่งที่มา

คำตอบไม่ได้ทำให้เข้าใจผิดมันเป็นเพียงการนำเสนอทางเลือกอื่นให้กับ. closest (), .parents () ดูอ่านง่ายกว่าและเป็นอีกวิธีแก้ปัญหา

— Sunny R Gupta

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

— Mog0

ตลกพอฉันลงเอยด้วยการใช้โซลูชันนี้เนื่องจาก .parentsUtil () ไม่ทำงานตามที่ฉันคาดไว้

— Mark Handy