jQuery HOẶC Bộ chọn?

325

Tôi tự hỏi liệu có cách nào để có logic "HOẶC" trong các bộ chọn jQuery không. Ví dụ, tôi biết một phần tử là hậu duệ của một phần tử với classA hoặc classB và tôi muốn làm một cái gì đó như thế elem.parents('.classA or .classB'). JQuery có cung cấp chức năng như vậy không?

jquery jquery-selectors

— Suan
nguồn

494

Sử dụng dấu phẩy.

'.classA, .classB'

Bạn có thể chọn bỏ qua không gian.

— Daniel A. Trắng
nguồn

43

Cần lưu ý rằng đây không thực sự là một bộ chọn 'hoặc', giống như nhiều bộ chọn trong một.

— alex

48

@alex: nhưng nó sẽ không chọn cùng một phần tử hai lần (mà một toán tử ghép sẽ làm). Nó thực sự là một bộ chọn OR vì nó tạo ra một UNION gồm hai hoặc nhiều bộ (trong khi AND là một giao điểm).

— cletus

Cảm ơn, điều đó làm việc. Do việc giám sát gỡ lỗi, tôi nghĩ rằng sử dụng dấu phẩy có nghĩa là 'VÀ'.

— Suan

38

ANDsẽ là .classA.classB.

— Daniel A. White

2

Nó thực sự phụ thuộc vào những gì câu hỏi ban đầu ngụ ý ... tức là: một toán tử 'hoặc' cổ điển sẽ bị đoản mạch. Do đó, một toán tử 'hoặc' theo cách nói jquery, cũng có thể bị đoản mạch.

— Mathew

71

Sử dụng dấu phẩy có thể không đủ nếu bạn có nhiều đối tượng jQuery cần tham gia.

Phương thức .add () thêm các phần tử được chọn vào tập kết quả:

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

Nó dài dòng hơn '.classA, .classB', nhưng cho phép bạn xây dựng các bộ chọn phức tạp hơn như sau:

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

— Alp
nguồn

22

Tôi đã viết một plugin cực kỳ đơn giản (5 dòng mã) cho chính xác chức năng này:

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

Nó cho phép bạn nói một cách hiệu quả "lấy phần tử này hoặc nếu phần tử đó không tồn tại, hãy sử dụng phần tử này". Ví dụ:

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

Trong khi câu trả lời được chấp nhận cung cấp chức năng tương tự như vậy, nếu cả hai bộ chọn (trước & sau dấu phẩy) tồn tại, cả hai bộ chọn sẽ được trả về.

Tôi hy vọng nó chứng minh hữu ích cho bất kỳ ai có thể truy cập trang này thông qua google.

— Bởi Richard Powell
nguồn

4

Đó không phải là cách toán tử boolean OR hoạt động. Nếu cả hai bộ chọn trả về các phần tử, toán tử OR sẽ trả về tất cả chúng và không chỉ các phần tử của bộ chọn đầu tiên. Plugin của bạn nên được đặt tên là "ifEmpty" hoặc "other" hoặc đại loại như thế.

— Alp

13

@Alp: Hãy xem xét hành vi của "a" || "b"vs. null || "b"trong vanilla JS. Nếu chúng ta áp dụng hành vi tương tự ở đây, $(a).or(b)nên trả lại $(a)nếu nó tồn tại, nếu không nó sẽ quay trở lại $(b). Tôi không nghĩ có gì sai với danh pháp này, vì "hoặc" khớp với hành vi của JS "||" (hoặc) toán tử.

— FtDRbwLXw6

4

Tôi cũng xem nó như một or. Có gì khác đang nói về là giống như một concathoặc mergehành động.

— Léon Pelletier

1

Cá nhân tôi sẽ không gọi đây là "hoặc", vì nó có thể dẫn đến nhầm lẫn (ngay cả khi về mặt kỹ thuật có thể đúng vì đây là một loại đặc biệt nếu / hoặc). Đây thực sự là sự hợp nhất null, được gọi là những thứ khác nhau và có các toán tử khác nhau trong các ngôn ngữ khác nhau: en.wikipedia.org/wiki/Null_coalescing_operator

— JanErikGunnar

Thuật ngữ 'xor' (độc quyền hoặc) sẽ là thuật ngữ chính xác, nhưng mọi người thường tìm kiếm hoặc khi tìm xor, vì nói chung, xor, theo thuật ngữ chung, là một loại cụ thể 'hoặc'.

— liljoshu

17

Nếu bạn đang tìm cách sử dụng cấu trúc tiêu chuẩn của phần tử = phần tử1 | | Element2 nơi JavaScript sẽ trả về cái đầu tiên là sự thật, bạn có thể làm chính xác điều đó:

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

mà sẽ trả về phần tử đầu tiên thực sự được tìm thấy. Nhưng một cách tốt hơn có lẽ là sử dụng cấu trúc dấu phẩy của bộ chọn jQuery (trả về một mảng các phần tử được tìm thấy) theo cách này:

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

Nó sẽ trả về phần tử tìm thấy đầu tiên.

Thỉnh thoảng tôi sử dụng nó để tìm một phần tử hoạt động trong danh sách hoặc một phần tử mặc định nếu không có phần tử hoạt động. Ví dụ:

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

sẽ trả lại bất kỳ li nào với một lớp hoạt động hoặc, nếu không có, sẽ chỉ trả lại li cuối cùng.

Hoặc là sẽ làm việc. Tuy nhiên, có những hình phạt hiệu suất tiềm năng là | | sẽ ngừng xử lý ngay khi nó tìm thấy điều gì đó trung thực trong khi cách tiếp cận mảng sẽ cố gắng tìm tất cả các phần tử ngay cả khi nó đã tìm thấy một phần tử. Sau đó, một lần nữa, bằng cách sử dụng | | cấu trúc có khả năng có thể có vấn đề về hiệu năng nếu nó phải trải qua một số bộ chọn trước khi tìm ra cái mà nó sẽ trả về, bởi vì nó phải gọi đối tượng jQuery chính cho mỗi cái (tôi thực sự không biết liệu đây có phải là hiệu năng hay không, nó chỉ có vẻ hợp lý mà nó có thể được). Tuy nhiên, nói chung, tôi sử dụng cách tiếp cận mảng khi bộ chọn là một chuỗi khá dài.

— Ken Dickinson
nguồn

Tôi nghĩ find ('. SomethingToBeFound, .s SomethingElseToBeFound') không giống với | | xây dựng. Bởi vì tìm nếu .s SomethingElseToBeFound có trong DOM trước .s SomethingToBeFound, nó sẽ được trả về ngay cả khi .s SomethingToBeFound tồn tại.

— Remo

0

Cuối cùng tôi đã tìm thấy hack làm thế nào để làm điều đó:

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

(chọn div với lớp classAHOẶC classBvới khoảng con trực tiếp)

— midlan
nguồn

-2

Daniel A. White Solution hoạt động tuyệt vời cho các lớp học.

Tôi đã có một tình huống mà tôi phải tìm các trường đầu vào như Donee_1_card trong đó 1 là một chỉ mục.

Giải pháp của tôi đã được

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

Mặc dù tôi không chắc nó tối ưu như thế nào.

— FDussault
nguồn