.Data () कुंजी / मान के आधार पर फ़िल्टर तत्व

Question

मान लें कि मेरे पास वर्ग के साथ 4 div एलिमेंट्स हैं .navlink, जिन्हें क्लिक .data()करने पर 'selected', एक वैल्यू सेट करने के लिए उपयोग किया जाता है true:

$('.navlink')click(function() { $(this).data('selected', true); })

जब भी कोई नया .navlinkक्लिक किया जाता है, मैं navlinkबाद में हेरफेर के लिए पहले से चयनित स्टोर करना चाहूंगा । क्या उपयोग किए गए स्टोर के आधार पर एक तत्व का चयन करने का एक त्वरित और आसान तरीका है .data()?

ऐसा प्रतीत नहीं होता है कि कोई भी jQuery : फ़िल्टर जो बिल को फिट करते हैं, और मैंने निम्नलिखित (एक ही क्लिक घटना के भीतर) की कोशिश की, लेकिन किसी कारण से यह काम नहीं करता है:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

मुझे पता है कि इसे पूरा करने के अन्य तरीके हैं, लेकिन अभी मैं ज्यादातर उत्सुक हूं, अगर इसे पूरा किया जा सके .data()।

Answer 1

आपका फ़िल्टर काम करेगा, लेकिन आपको उन्हें हथियाने के लिए फ़िल्टर के लिए दिए गए फ़ंक्शन में मिलान वाले ऑब्जेक्ट पर सही लौटना होगा।

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Comments

कृपया ध्यान दें कि यह अब ऐसा करने का एकमात्र तरीका नहीं है, स्टेफानो ने विकल्प प्रदान किए हैं

— नाथन कोप

@ नथनकूप, काफी नहीं। उनके जवाब पर मेरी टिप्पणी देखें।

— ब्रायन डाउनिंग

उन लोगों के लिए जो किसी अन्यथा अपरिहार्य तत्व (आईडी कम डिव आदि) को खोजने के लिए डेटा विशेषता का उपयोग करते हैं ... जो आपको दस्तावेज़ में किसी भी स्थान पर किसी भी कारण से उपयोग करने में सक्षम होने की आवश्यकता है:$("*").filter(function() { return $(this).data("DATA IDENTIFIER HERE") == DATA VALUE HERE; });

— Tschallacka

यह "गड़बड़" नहीं है - यह बिना किसी शर्त के फ़िल्टर करने का एकमात्र सुरक्षित तरीका है, बिना आवश्यकता के कि आप उन मूल्यों से "बच" जाते हैं, जो यह सुनिश्चित करते हैं कि चयनकर्ता के बाकी के साथ खोज शब्द का संगति एक अवैध चयनकर्ता नहीं बनाता है।

— एल्निटैक

Answer 2

केवल रिकॉर्ड के लिए, आप jquery के साथ डेटा पर फ़िल्टर कर सकते हैं (यह प्रश्न काफी पुराना है, और jQuery तब से विकसित हुआ है, इसलिए यह समाधान भी लिखना सही है):

$('.navlink[data-selected="true"]');

या, बेहतर (प्रदर्शन के लिए):

$('.navlink').filter('[data-selected="true"]');

या, यदि आप data-selectedसेट के साथ सभी तत्वों को प्राप्त करना चाहते हैं :

$('[data-selected]')

ध्यान दें कि यह विधि केवल उन डेटा के साथ काम करेगी जो HTML- विशेषताओं के माध्यम से सेट की गई थी। यदि आप .data()कॉल के साथ डेटा सेट या बदलते हैं, तो यह विधि अब काम नहीं करेगी।

Comments

यदि इस उत्तर के लिए कम वोट की गिनती आपको डराती है - यह लगभग समान प्रश्न stackoverflow.com/questions/4146502 के

— Simon_Weaver

-1 यह तब काम नहीं करता है जब .data()किसी data-विशेषता के बजाय विधि के साथ डेटा सेट किया जाता है । इस फिडेल को देखें: jsfiddle.net/bryandowning/tySWC - इसके अलावा, .find()विधि पूर्ववर्ती चयनकर्ता के बच्चों की खोज करती है। दिए गए उदाहरण में, data-selectedका एक गुण है .navlink, का कोई बच्चा नहीं है .navlink। इसके अलावा, $('div p')और $('div').find('p')अनिवार्य रूप से बराबर हैं। उपयोग करना .find()ऐसा लगता है कि अतिरिक्त फ़ंक्शन कॉल के कारण यह धीमा हो सकता है (हालांकि मैं इस बारे में सकारात्मक नहीं हूं)। कृपया मुझे सही करें अगर मैं इसमें से किसी के बारे में गलत हूं (मैं वास्तव में इस विधि ने काम किया है)।

— ब्रायन डाउनिंग

कुछ चीजें: 1) आप सही हैं कि यह काम नहीं करता है यदि आप डेटा को सेट करते हैं .data(), क्योंकि jQuery डोम के माध्यम से खोज करता है, तो मैंने इसे उन (मेरे जैसे) के लिए पोस्ट किया, जो अन्य कारणों से इस सवाल पर आ गए; 2) सही, .find()बच्चों के माध्यम से खोज करता है, इसलिए यह इस उदाहरण में गलत है; 3) आप गलत हैं, वे बराबर नहीं हैं, क्योंकि jQuery दाएं-बाएं खोजता है

— StefanoP

वोट फॉर $('[data-selected]')इट ने मुझे कुछ इस तरह मदद की$('ul.categories a[data-categories_id]').click(......);

— ल्यूक कजिन

इसके अलावा, ऐसा लगता है कि यदि आप .attr का उपयोग करते हुए डेटा विशेषता को अपडेट करते हैं, यदि आप इसका उपयोग करके पुनर्प्राप्त करते हैं। डेटा को अपडेट नहीं किया जाएगा - तो दो को मिलाकर सावधान रहें

— Fabio Lolli

Answer 3

हम एक प्लगइन बहुत आसानी से कर सकते हैं:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

उपयोग (एक रेडियो बटन की जाँच):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Comments

आप प्लगइन विधि का मतलब है अन्यथा यह स्वीकार किए जाते हैं उत्तर के रूप में ही है ...

— jave.web

@ jave.web वास्तव में। लेकिन हर कोई नहीं जानता कि इसे प्लगइन में कैसे बदलना है। अद्यतित क्रिया।

— एमपीएन

मुझे गलत मत समझो, आपका जवाब बहुत अच्छा है, हालाँकि यहाँ शब्द बहुत महत्वपूर्ण हैं, अपडेट के लिए धन्यवाद :)

— jave.web

Answer 4

दो बातें जिन पर मैंने गौर किया (वे गलतियाँ हो सकती हैं जब आपने इसे नीचे लिखा था)।

1. आपने पहले उदाहरण में एक डॉट याद किया ( $('.navlink').click)
2. फ़िल्टर को काम करने के लिए, आपको एक मूल्य वापस करना होगा ( return $(this).data("selected")==true)

Answer 5

इसकी कीमत से अधिक काम की तरह लगता है।

1) केवल एक जावास्क्रिप्ट चर क्यों नहीं है जो वर्तमान में चयनित एलिमेंट \ jQuery ऑब्जेक्ट के संदर्भ को संग्रहीत करता है।

2) वर्तमान में चयनित तत्व में एक वर्ग क्यों नहीं जोड़ा गया। तब आप ".active" वर्ग या कुछ के लिए DOM को क्वेरी कर सकते थे।

Comments

हाँ, लेकिन जैसा कि मैंने कहा, मुझे पता था कि इसे पूरा करने के अन्य तरीके थे। मैं सिर्फ इस बात पर अड़ा रहा कि क्या इसे डेटा () के माध्यम से फ़िल्टर किया जा सकता है, और क्यों फ़िल्टर () मेरे लिए काम नहीं कर रहा था। हालांकि धन्यवाद।

— user113716

माफ़ करना। मुझे आपके प्रश्न का वह हिस्सा याद आ गया।

— ब्रायन मिगलोरिसी