करें HTML तत्व सीएसएस संपत्ति के मूल्य से

Question

मैं इस तरह HTML है:

var pos = { top: 252, left: 54 }; 

मैं के साथ तत्व का चयन करना चाहते हैं:

… 
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div> 
… 

मैं एक जावास्क्रिप्ट इस तरह शाब्दिक आपत्ति है स्थिति है कि वस्तु शाब्दिक इंगित करता है। स्थिति अद्वितीय हैं, इसलिए केवल एक तत्व का चयन किया जाएगा।

उत्तर के लिए धन्यवाद।

Answer 1

क्रेडिट मूल पोस्टर पर यहां जाता है;

jQuery find by inline css attribute

समारोह 'styleEquals' है और के रूप में लागू किया जा सकता;

jQuery.extend(jQuery.expr[':'], { 
    styleEquals: function(a, i, m){ 
     var styles = $(a).attr("style").split(" ") 
     var found = false; 
     for (var i = 0; i < styles.length; i++) { 
       if (styles[i]===m[3]) { 
         found = true; 
         break; 
       } 
     } 
     return found; 
    } 
}); 

फिर आप अपने नए jquery एक्सटेंशन फ़ंक्शन का उपयोग करके अपने स्टाइल विशेषता मानों द्वारा तत्वों को खोज सकते हैं;

$("div:styleEquals('top=252px'):styleEquals('left:54px')"); 

Answer 2

मैं बस इतना कह सकता हूं कि ऐसा नहीं है!

यदि आप एक div में एक अद्वितीय स्थिति शैली जोड़ सकते हैं, तो आप एक ही समय में एक पहचानकर्ता को आसानी से जोड़ सकते हैं।

जावास्क्रिप्ट में तत्व का चयन करने के लिए इस पहचानकर्ता का उपयोग करें, सीएसएस स्थिति नहीं।

Answer 3

उपयोग

function findElement (top, left) { 
    return target = $('div').filter(function() { 
     var div = $(this); 
     if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left) 
      return true; 
     return false; 
    }); 
} 

jsfiddle sample

Answer 4

देखें जब आप इन DIV उत्पन्न करते हैं, उन्हें अद्वितीय आईडी विशेषता के साथ आवंटित। फिर आप आईडी विशेषता के साथ DIV ऑब्जेक्ट पुनर्प्राप्त कर सकते हैं।

Answer 5

उन्हें कक्षा या आईडी दें और कक्षा/आईडी का उपयोग करके उनका चयन करें, यह बहुत तेज़ होगा। अन्यथा आपको उन सभी को ढूंढना होगा और सीएसएस मूल्यों द्वारा फ़िल्टर करना होगा।

Answer 6

आप बॉक्स से बाहर the jQuery JavaScript library के साथ इस तरह यह कर सकते हैं:

var pos = { top: 252, left: 54 }; 
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]'); 

आप सफेद स्थान लगातार उपयोग करने के लिए सुनिश्चित करने के लिए की जरूरत है। यदि आप टाइप करते हैं:

<div style="top:252px; left:54px;"></div> 

प्रस्तावित चयनकर्ता काम नहीं करेगा।

आप मेरे उदाहरण कोड का उपयोग करके style विशेषता में अन्य सीएसएस गुण भी जोड़ सकते हैं, और ऑर्डर कोई फर्क नहीं पड़ता।

<div style="left: 54px; background: gray; top: 252px;"></div> 

Answer 7

आप शैली विशेषता की सामग्री से तत्व का चयन कर सकते हैं (रिक्त स्थानों पर ध्यान देना):

$('div[style*="top: 252px; left: 54px"]').css("color","red") 

Example यहाँ एक उदाहरण है।

लेकिन बोनीटी ने कहा - आपको मूल्यों को आईडी या कक्षा में रखना चाहिए।