jQuery หรือ Selector?

325

ฉันสงสัยว่ามีวิธีที่จะมีตรรกะ "หรือ" ในตัวเลือก jQuery ตัวอย่างเช่นฉันรู้ว่าองค์ประกอบที่เป็นทั้งลูกหลานขององค์ประกอบกับการเรียนหรือ ClassA ClassB elem.parents('.classA or .classB')และผมต้องการที่จะทำสิ่งที่ชอบ jQuery มีฟังก์ชั่นดังกล่าวหรือไม่?

jquery jquery-selectors

— สวน
แหล่งที่มา

494

ใช้เครื่องหมายจุลภาค

'.classA, .classB'

คุณอาจเลือกที่จะเว้นพื้นที่

— Daniel A. White
แหล่งที่มา

43

ควรสังเกตว่านี่ไม่ใช่ตัวเลือก 'หรือ' จริงๆเหมือนตัวเลือกหลายตัวในตัวเดียว

— alex

49

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

— cletus

ขอบคุณที่ใช้งานได้ เนื่องจากการตรวจแก้จุดบกพร่องฉันคิดว่าการใช้เครื่องหมายจุลภาคหมายถึง 'และ'

— สวน

38

AND.classA.classBจะเป็น

— Daniel A. White

2

ที่จริงแล้วมันขึ้นอยู่กับสิ่งที่คำถามเดิมบอกเป็นนัย ... เช่น: โอเปอเรเตอร์แบบ 'หรือ' แบบคลาสสิกจะลัดวงจร ดังนั้นผู้ประกอบการ 'หรือ' ในการพูดจา jquery อาจลัดวงจรเกินไป

— แม็ตธิว

71

การใช้เครื่องหมายจุลภาคอาจไม่เพียงพอหากคุณมีวัตถุ jQuery หลายรายการที่ต้องเข้าร่วม

กระบวนการ. add ()วิธีการเพิ่มองค์ประกอบที่เลือกในชุดผลลัพธ์:

// classA OR classB
jQuery('.classA').add('.classB');

มันมีความละเอียดมากกว่า'.classA, .classB'แต่ให้คุณสร้างตัวเลือกที่ซับซ้อนมากขึ้นดังต่อไปนี้:

// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));

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

22

ฉันได้เขียนปลั๊กอิน (5 บรรทัดของโค้ด) ที่เรียบง่ายอย่างเหลือเชื่อสำหรับฟังก์ชันนี้:

http://byrichardpowell.github.com/jquery-or/

จะช่วยให้คุณพูดอย่างมีประสิทธิภาพ "รับองค์ประกอบนี้หรือถ้าองค์ประกอบนั้นไม่มีอยู่ใช้องค์ประกอบนี้" ตัวอย่างเช่น:

$( '#doesntExist' ).or( '#exists' );

ในขณะที่คำตอบที่ได้รับการยอมรับนั้นมีฟังก์ชั่นที่คล้ายกันนี้หากมีตัวเลือกทั้งสอง (ก่อน & หลังเครื่องหมายจุลภาค) อยู่ตัวเลือกทั้งสองจะถูกส่งกลับ

ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคนที่อาจลงจอดบนหน้านี้ผ่านทาง Google

— โดย Richard Powell
แหล่งที่มา

4

นั่นไม่ใช่วิธีการใช้งานตัวดำเนินการบูลีนหรือ หากตัวเลือกทั้งสองส่งคืนองค์ประกอบตัวดำเนินการ OR ควรคืนค่าทั้งหมดและไม่เพียง แต่องค์ประกอบของตัวเลือกแรกเท่านั้น ปลั๊กอินของคุณควรมีชื่อว่า "ifEmpty" หรือ "else" หรืออะไรทำนองนั้น

— Alp

13

@Alp: พิจารณาพฤติกรรมของ"a" || "b"vs. null || "b"ใน vanilla JS ถ้าเราใช้พฤติกรรมเดียวกันที่นี่$(a).or(b)ควรจะกลับถ้ามันมีอยู่แล้วมิฉะนั้นก็ควรจะกลับ$(a) $(b)ฉันไม่คิดว่ามีอะไรผิดปกติกับระบบการตั้งชื่อนี้เนื่องจาก "หรือ" ตรงกับพฤติกรรมของ JS "||" (หรือ) ผู้ประกอบการ

— FtDRbwLXw6

4

orฉันยังเห็นว่ามันเป็น สิ่งอื่น ๆ ที่มีการพูดคุยเกี่ยวกับการเป็นเหมือนconcatหรือmergeการกระทำ

— Léon Pelletier

1

โดยส่วนตัวแล้วฉันจะไม่เรียกสิ่งนี้ว่า "หรือ" เนื่องจากอาจนำไปสู่ความสับสน (แม้ว่ามันอาจจะเป็นเทคนิคที่ถูกต้องเพราะมันเป็นแบบพิเศษของ if / หรือ) สิ่งนี้มีผลต่อการรวมกันของ null ซึ่งเรียกว่าสิ่งที่แตกต่างกันและมีตัวดำเนินการที่แตกต่างกันในภาษาต่าง ๆ : en.wikipedia.org/wiki/Null_coalescing_operator

— JanErikGunnar

คำว่า 'xor' (เป็นเอกสิทธิ์หรือ) จะเป็นคำที่ถูกต้อง แต่บ่อยครั้งที่ผู้คนค้นหาหรือเมื่อมองหา xor โดยที่ xor โดยทั่วไปแล้วในแง่ทั่วไปเป็นประเภทที่เฉพาะเจาะจงของ 'หรือ'

— liljoshu

17

หากคุณต้องการใช้โครงสร้างมาตรฐานของ element = element1 || element2 ที่ JavaScript จะคืนค่าแรกที่เป็นความจริงคุณสามารถทำได้อย่างแน่นอน:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');

ซึ่งจะส่งคืนองค์ประกอบแรกที่พบจริง แต่วิธีที่ดีกว่าน่าจะเป็นการใช้เครื่องหมายจุลภาคของตัวเลือก jQuery (ซึ่งจะคืนค่าอาร์เรย์ขององค์ประกอบที่พบ) ในแบบนี้:

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];

ซึ่งจะส่งคืนองค์ประกอบที่พบครั้งแรก

ฉันใช้สิ่งนั้นเป็นครั้งคราวเพื่อค้นหาองค์ประกอบที่ใช้งานอยู่ในรายการหรือองค์ประกอบเริ่มต้นบางอย่างหากไม่มีองค์ประกอบที่ใช้งานอยู่ ตัวอย่างเช่น:

element = $('ul#someList').find('li.active, li:first')[0]

ซึ่งจะส่งคืน li ใด ๆ ที่มีคลาสของ active หรือหากไม่มีจะส่งคืน li ล่าสุด

ทั้งสองจะทำงาน มีบทลงโทษด้านประสิทธิภาพที่อาจเป็นไปได้ในฐานะ || จะหยุดการประมวลผลทันทีที่พบสิ่งที่เป็นจริงในขณะที่วิธีการเรียงลำดับจะพยายามค้นหาองค์ประกอบทั้งหมดแม้ว่าจะพบสิ่งหนึ่งแล้ว จากนั้นอีกครั้งโดยใช้ || การสร้างอาจมีปัญหาด้านประสิทธิภาพหากต้องผ่านตัวเลือกหลายตัวก่อนที่จะหาตัวที่จะส่งคืนเนื่องจากต้องเรียกวัตถุหลัก jQuery สำหรับแต่ละอัน (ฉันไม่รู้จริงๆว่านี่เป็นประสิทธิภาพหรือไม่ มันดูสมเหตุสมผลที่จะเป็น) โดยทั่วไปแล้วฉันใช้วิธีการเรียงลำดับเมื่อตัวเลือกเป็นสตริงที่ค่อนข้างยาว

— เคนดิกคินสัน
แหล่งที่มา

ฉันคิดว่า find ('. somethingToBeFound, .somethingElseToBeFound') ไม่เหมือนกับ || สร้าง. เพราะหาว่า. SomethingElseToBeFound อยู่ใน DOM ก่อน. SomethingToBeFound มันจะถูกส่งคืนแม้ว่าจะมี. SomethingToBeFound อยู่

— remo

0

ในที่สุดฉันก็ได้พบวิธีแฮ็ค:

div:not(:not(.classA,.classB)) > span

(เลือก div กับคลาสclassAหรือclassBกับช่วงลูกโดยตรง)

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

-2

Daniel A. White Solution ใช้งานได้ดีสำหรับชั้นเรียน

ฉันมีสถานการณ์ที่ฉันต้องค้นหาช่องป้อนข้อมูลเช่นDonee_1_cardโดยที่ 1 เป็นดัชนี

ทางออกของฉันได้รับ

$("input[name^='donee']" && "input[name*='card']")

แม้ว่าฉันจะไม่แน่ใจว่ามันเป็นวิธีที่ดีที่สุด

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