डेटा-आईडी विशेषता कैसे प्राप्त करें?

Question

मैं jQuery के quicksand प्लगइन का उपयोग कर रहा हूं। मुझे क्लिक की गई वस्तु का डेटा-आईडी प्राप्त करना होगा और इसे एक webservice पर भेजना होगा। मैं डेटा-आईडी विशेषता कैसे प्राप्त करूं? मैं .on()हल किए गए आइटम के लिए क्लिक इवेंट को फिर से बाँधने के लिए विधि का उपयोग कर रहा हूँ ।

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>

Comments

नए आगंतुकों को सूचना: JQuery की .live () विधि को

— .on

आपको अलर्ट से # हटा देना चाहिए, आपको इसकी आवश्यकता नहीं है :-)

— कार्टर बन जाता है

attr ("# data-id") गलत है। सही किया गया: attr ("डेटा-आईडी"));

— गाइडो _nhcol.com.br_

@BruceAdams इस on()पद्धति का उपयोग करने के लिए प्रश्न को संपादित करने के लायक हो सकता है जैसा live()कि अब पदावनत किया जाता है, और यह प्रश्न काफी कुछ आगंतुकों को मिलता है।

— बजे रोरी मैक्रों

Answer 1

विशेषता की सामग्री प्राप्त करने के लिए data-id(जैसे <a data-id="123">link</a>) आपको उपयोग करना होगा

$(this).attr("data-id") // will return the string "123"

या .data()(यदि आप नए jQuery का उपयोग करते हैं = = 1.4.3)

$(this).data("id") // will return the number 123

और उसके बाद का हिस्सा data-लोअरकेस में होना चाहिए, जैसे data-idNumकाम नहीं करेगा, लेकिन data-idnumहोगा।

Comments

मुझे उपयोग करना पड़ा attr()क्योंकि jQuery ज़िप कोड से अग्रणी शून्य का उपयोग कर रहा था data(), TFM कहता है "जैसा कि jQuery के 1.4.3 HTML 5 डेटा- विशेषताओं को स्वचालित रूप से jQuery के डेटा ऑब्जेक्ट में खींच लिया जाएगा। ... स्ट्रिंग को परिवर्तित करने के लिए हर प्रयास किया जाता है। जावास्क्रिप्ट मूल्य के लिए (इसमें बूलियन, संख्या, ऑब्जेक्ट, एरे और नल) शामिल हैं। एक मान केवल एक संख्या में परिवर्तित किया जाता है यदि ऐसा करने से मूल्य का प्रतिनिधित्व नहीं बदलता है। उदाहरण के लिए, "1E02" और "100.000" समकक्ष हैं। संख्याओं (संख्यात्मक मान 100) के रूप में, लेकिन उन्हें परिवर्तित करने से उनका प्रतिनिधित्व बदल जाएगा, ताकि वे तार के रूप में बचे रहें। "

— वेस्ले मर्क

यह मेरे लिए is अपरिभाषित ’लौट रहा है।

— फॉरएवर

जबकि कुछ के लिए स्पष्ट है, मुझे लगता है कि यह उन लोगों के लिए ध्यान देने योग्य है जो इस बात से परेशान थे कि उपयोग करते समय .attr () कोष्ठक के अंदर का पाठ आपके कस्टम डेटा-विशेषता के रूप में जो कुछ भी आपने निर्धारित किया है, उससे मेल खाना चाहिए। यानी यदि कस्टम डेटा विशेषता डेटा-वॉल्यूम है , तो आपको .attr ("डेटा-वॉल्यूम") का उपयोग करके इसे संदर्भित करना होगा । और, jQuery 1.4.3 ऊपर की तरफ और .data का उपयोग कर () के साथ, कोष्ठक के अंदर का पाठ कस्टम डेटा विशेषता से मेल खाना चाहिए बिना डेटा- उपसर्ग। यानी यदि कस्टम डेटा विशेषता डेटा-वॉल्यूम है , तो आपको इसे .data ("वॉल्यूम") का उपयोग करके संदर्भित करना होगा ।

— ल्यूक

रिपोर्ट करने वालों के लिए यह काम नहीं करता है, सुनिश्चित करें कि आपकी विशेषता में केवल निचले अक्षर हैं। उदाहरण के लिए "data-listId" "data-listid" होना चाहिए। कारण के लिए stackoverflow.com/questions/10992984/… देखें ।

— विंडचाइम्स

या$(this).data().id //returns 123

— डेम पिलाफियन

Answer 2

यदि हम मौजूदा, देशी जावास्क्रिप्ट का उपयोग करके इन विशेषताओं को पुनः प्राप्त या अद्यतन करना चाहते हैं , तो हम ऐसा कर सकते हैं कि नीचे दिए गए तरीके के रूप में getAttribute और setAttribute विधियों का उपयोग करें:

जावास्क्रिप्ट के माध्यम से

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

JQuery के माध्यम से

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

इस प्रलेखन को पढ़ें

Answer 3

महत्वपूर्ण लेख। ध्यान रखें, यदि आप जावास्क्रिप्ट के माध्यम से data- विशेषता को गतिशील रूप से समायोजित करते हैं तो यह data()jQuery फ़ंक्शन में परिलक्षित नहीं होगा । आपको इसे data()फंक्शन के माध्यम से भी समायोजित करना होगा ।

<a data-id="123">link</a>

js:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

Comments

अच्छा बिंदु ... क्या कोई डेटा () है जो विशेषताओं से डेटा को ताज़ा करने के लिए ताज़ा है?

— हरगुल

यह गतिशील रूप से डेटा विशेषता मान को बदलने और एक्सेस करने के लिए एक महत्वपूर्ण बिंदु है।

— मोटाहार हुसैन

Answer 4

यदि आप पुराने IE ब्राउज़र के बारे में चिंतित नहीं हैं, तो आप HTML5 डेटासेट API का भी उपयोग कर सकते हैं

एचटीएमएल

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

जे एस

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

डेमो: http://html5demos.com/dataset

पूर्ण ब्राउज़र सहायता सूची: http://caniuse.com/#feat=dataset

Answer 5

आश्चर्यचकित किसी ने उल्लेख नहीं किया:

<select id="selectVehicle">
     <option value="1" data-year="2011">Mazda</option>
     <option value="2" data-year="2015">Honda</option>
     <option value="3" data-year="2008">Mercedes</option>
     <option value="4" data-year="2005">Toyota</option>
    </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

यहाँ काम कर उदाहरण है: https://jsfiddle.net/ed5axgvk/1/

Comments

बहुत अच्छा जवाब। बहुत बहुत धन्यवाद।

— रुबेरिंडा धैर्य 23

Answer 6

एचटीएमएल

<span id="spanTest" data-value="50">test</span>

जे एस

$(this).data().value;

या

$("span#spanTest").data().value;

ANS: 50

मेरे लिये कार्य करता है!

Answer 7

मैं $ .data का उपयोग करता हूं - http://api.jquery.com/jquery.data/

//Set value 7 to data-id 
$.data(this, 'id', 7);

//Get value from data-id
alert( $(this).data("id") ); // => outputs 7

Answer 8

var id = $(this).dataset.id

मेरे लिये कार्य करता है!

Answer 9

अपने आप idसे डेटा विशेषता एक्सेस करना मेरे लिए थोड़ा आसान है।

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>

Answer 10

यह कोड डेटा विशेषताओं के मान को लौटाएगा जैसे: डेटा-आईडी, डेटा-समय, डेटा-नाम आदि .., मैंने आईडी दिखाया है

<a href="#" id="click-demo" data-id="a1">Click</a>

js:

$(this).data("id");

// डेटा-आईडी का मूल्य प्राप्त करें -> a1

$(this).data("id", "a2");

// यह डेटा-आईडी बदल देगा -> a2

$(this).data("id");

// डेटा-आईडी का मूल्य प्राप्त करें -> a2

Answer 11

jQuery का उपयोग:

  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });

Answer 12

टूलटिप को गतिशील रूप से हटाने और पुन: सक्षम करने की चाह रखने वालों के लिए, आप disposeऔर enableविधियों का उपयोग कर सकते हैं । Https://getbootstrap.com/docs/4.0/compenders/tooltips/#tooltipdispose देखें

Answer 13

मेरे पास एक स्पैन है। मैं विशेषता डेटा-txt-lang का मूल्य लेना चाहता हूं, जिसका उपयोग परिभाषित किया गया है।

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

Answer 14

मुद्दा यह है कि आप ड्रॉपडाउन या सूची के विकल्प या चयनित विकल्प को निर्दिष्ट नहीं कर रहे हैं, यहां ड्रॉपडाउन के लिए एक उदाहरण है, मैं एक डेटा विशेषता डेटा-रिकॉर्ड मान रहा हूं।

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });