मुझे तत्वों के लिए अद्वितीय सीएसएस चयनकर्ता उत्पन्न करने की आवश्यकता है।
विशेष रूप से, मेरे पास ईवेंट हैंडलर पर क्लिक है जो याद रखना चाहिए कि लक्ष्य तत्व पर क्लिक किया गया था और यह जानकारी मेरे सर्वर पर भेज दी गई थी। क्या डोम संशोधन किए बिना ऐसा करने का कोई तरीका है?डीओएम तत्व के लिए अद्वितीय सीएसएस चयनकर्ता कैसे उत्पन्न करें?
पीएस मेरा जावास्क्रिप्ट कोड अलग-अलग
3-rd पार्टी वेबसाइटों पर चलाना चाहिए, इसलिए मैं HTML के बारे में कोई धारणा नहीं कर सकता।
माना कि आप सरलता के लिए लिंक की एक सूची है देखें: आप बस सभी तत्वों
<a href="#">...</a>
<a href="#">...</a>
<a href="#">...</a>
js के संग्रह में ट्रिगर तत्व के सूचकांक पारित कर सकते हैं (jQuery 1.7+, मैं .on() इस्तेमाल किया अन्यथा उपयोग bind()) समारोह
var triggers = $('a');
triggers.on('click', function(e) {
e.preventDefault();
var index = triggers.index($(this));
/* ajax call passing index value */
});
हो सकता है इतना है कि आप तीसरे elemen पर क्लिक करते हैं टी सूचकांक मूल्य पास किया जाएगा 2. (0-आधारित सूचकांक); बेशक यह तब तक मान्य है जब तक कोड (डीओएम) नहीं बदलता है। बाद में आप उस तत्व का उपयोग उस तत्व के लिए एक सीएसएस नियम बनाने के लिए कर सकते हैं उदा। :nth-child
का उपयोग कर नहीं तो अगर अपने तत्वों में से हर एक के लिए एक अलग विशेषता (एक आईडी की तरह) आप उस गुण
उदाहरण JsFiddle पर पारित कर सकते हैं: http://jsfiddle.net/t7J8T/
यह एक जटिल समस्या के लिए एक सरल समाधान है - अद्वितीय सीएसएस चयनकर्ता उत्पन्न करना जो आदर्श रूप से पृष्ठ संरचना में बदलावों के लिए कुछ हद तक मजबूत हैं। 10+ पुस्तकालय हैं जो सीएसएस चयनकर्ता उत्पन्न करते हैं, और उनमें से एक के लेखक ने [इस तुलना] [https://github.com/fczbkk/css-selector-generator-benchmark) प्रकाशित किया है। –
@ डैन डस्कलेसु: दुर्भाग्यवश, चयनकर्ता स्वयं ऐसी समस्या को हल करने के तरीके में बहुत अधिक प्रदान नहीं करते हैं। आईडी और कक्षा चयनकर्ताओं के अलावा, चयनकर्ताओं में बहुत कुछ और डिजाइन द्वारा डिजाइन संरचना के साथ कसकर जोड़ा जाता है। एकमात्र चयनकर्ता जिसे आप बना सकते हैं, संरचना के बावजूद किसी तत्व को विशिष्ट रूप से पहचानने वाला एक अकेला आईडी चयनकर्ता है, और यह भी मानता है कि दस्तावेज़ अनुरूप है। (मुझे यकीन नहीं है कि: रूट एक अनुरूप दस्तावेज़ में एक अद्वितीय तत्व की गारंटी देता है, लेकिन यदि ऐसा होता है, तो यह केवल एक अन्य चयनकर्ता होगा जो उस पर विशेष रूप से उपयोगी नहीं होगा।) – BoltClock
आप शायद चयनकर्ता उत्पन्न करने के लिए नोड से वापस शरीर तत्व में डीओएम पेड़ को पार कर सकते हैं।
फ़ायरबग के लिए XPath और CSS चयनकर्ताओं का उपयोग करके इसकी सुविधा है।
क्या आप ऐसी जावास्क्रिप्ट लाइब्रेरी सुझा सकते हैं जो ऐसी कार्यक्षमता प्रदान करता है? – tsds
@tsds: 10+ पुस्तकालय हैं जो सीएसएस चयनकर्ता उत्पन्न करते हैं, और उनमें से एक लेखक ने [इस तुलना] [https://github.com/fczbkk/css-selector-generator-benchmark) प्रकाशित किया है। –
हाँ, आप ऐसा कर सकता है। लेकिन कुछ चेतावनी के साथ। यह गारंटी देने में सक्षम होने के लिए कि चयनकर्ता अद्वितीय हैं, आपको :nth-child() का उपयोग करना होगा जो सार्वभौमिक रूप से समर्थित नहीं है। यदि आप फिर इन सीएसएस चयनकर्ताओं को सीएसएस फाइलों में रखना चाहते हैं, तो यह सभी ब्राउज़रों में काम नहीं करेगा।
मैं कुछ इस तरह से यह करना चाहते हैं:
function() {
if (this.id) {
return sendToServer('#' + this.id);
}
var parent = this.parentNode;
var selector = '>' + this.nodeName + ':nth-child(' + getChildNumber(this) ')';
while (!parent.id && parent.nodeName.toLowerCase() !== 'body') {
selector = '>' + this.nodeName + ':nth-child(' + getChildNumber(parent) + ')' + selector;
parent = parent.parentNode;
}
if (parent.nodeName === 'body') {
selector = 'body' + selector;
} else {
selector = '#' + parent.id + selector;
}
return sendToServer(selector);
}
तो प्रत्येक तत्व को मॉडल करना चाहते का क्लिक हैंडलर है कि जोड़ें। मैं आपको getChildNumber() लागू करने के लिए छोड़ दूंगा।
संपादित करें: बस देखा यह 3 पार्टी कोड जा रहा है ... तो तुम एक event तर्क जोड़ सकता है, event.target साथ this के सभी उदाहरणों की जगह और फिर बस अगर है कि window के क्लिक करें घटना के लिए समारोह देते हैं के बारे में अपनी टिप्पणी आसान।
आदर्श सीएसएस चयनकर्ताओं को आदर्श बनाना पृष्ठ संरचना में बदलाव के लिए कुछ हद तक मजबूत हैं एक जटिल समस्या है। 10+ पुस्तकालय हैं जो सीएसएस चयनकर्ता उत्पन्न करते हैं, और उनमें से एक के लेखक ने [इस तुलना] [https://github.com/fczbkk/css-selector-generator-benchmark) प्रकाशित किया है। –
"use strict";
function getSelector(_context){
var index, localName,pathSelector, that = _context, node;
if(that =='null') throw 'not an dom reference';
index = getIndex(that);
while(that.tagName){
pathSelector = that.localName+(pathSelector?'>'+pathSelector :'');
that = that.parentNode;
}
pathSelector = pathSelector+':nth-of-type('+index+')';
return pathSelector;
}
function getIndex(node){
var i=1;
var tagName = node.tagName;
while(node.previousSibling){
node = node.previousSibling;
if(node.nodeType === 1 && (tagName.toLowerCase() == node.tagName.toLowerCase())){
i++;
}
}
return i;
}
document.addEventListener('DOMContentLoaded', function(){
document.body.addEventListener('mouseover', function(e){
var c = getSelector(e.target);
var element = document.querySelector(c);
//console.log(element);
console.log(c);
//element.style.color = "red"
});
});
आप इसे आजमा सकते हैं। jquery का उपयोग किए बिना।
केवल 'nth-of-type' चयनकर्ताओं का उपयोग करके और आईडी को अनदेखा करने के लिए चयनकर्ता के लिए बनाता है जो पृष्ठ संरचना में परिवर्तनों के लिए कम मजबूत है। यह समस्या सरल प्रतीत हो सकती है, लेकिन वास्तविकता में यह थोड़ा और जटिल है - अद्वितीय सीएसएस चयनकर्ता उत्पन्न करना जो आदर्श रूप से पृष्ठ संरचना में बदलावों के लिए कुछ हद तक मजबूत हैं। 10+ पुस्तकालय हैं जो सीएसएस चयनकर्ता उत्पन्न करते हैं, और उनमें से एक के लेखक ने [इस तुलना] [https://github.com/fczbkk/css-selector-generator-benchmark) प्रकाशित किया है। –
चेक इस CSS चयनकर्ता जनरेटर पुस्तकालय @medv/finder
उदाहरण:
.blog > article:nth-child(3) .add-comment
आप html आप में तत्व का चयन करने की जरूरत है प्रदान कर सकते हैं? –
असल में, मुझे "मेरा" एचटीएमएल नहीं मिला है क्योंकि मेरा जावास्क्रिप्ट कोड कुछ 3-पक्षीय पार्टी वेबसाइटों में डाला गया है, इसलिए एचटीएमएल कोड में कुछ मनमानी संरचना – tsds
है और आपके जेएस कोड के बारे में क्या है? – Miquel