දත්ත ගුණාංග අනුව මූලද්‍රව්‍යය තෝරා ගැනීම

ඒවායේ dataගුණාංගය මත පදනම්ව මූලද්‍රව්‍ය තෝරා ගැනීමට පහසු සහ forward ජුව ඉදිරියට යා හැකි ක්‍රමයක් තිබේද? උදාහරණයක් ලෙස, customerIDවටිනාකමක් ඇති දත්ත ලක්ෂණයක් ඇති සියලුම නැංගුරම් තෝරන්න 22.

relඑවැනි තොරතුරු ගබඩා කිරීම සඳහා භාවිතා කිරීමට හෝ වෙනත් ගුණාංග භාවිතා කිරීමට මම පසුබට වෙමි , නමුත් එහි ගබඩා කර ඇති දත්ත මත පදනම්ව මූලද්‍රව්‍යයක් තෝරා ගැනීම මට වඩා දුෂ්කර ය.

$('*[data-customerID="22"]');

ඔබට මඟ හැරිය හැකි විය යුතුය *, නමුත් ඔබ නිවැරදිව සිහිපත් කළහොත්, ඔබ භාවිතා කරන්නේ කුමන jQuery අනුවාදය මත පදනම්ව, මෙය වැරදි ප්‍රති .ල ලබා දෙනු ඇත.

තේරීම් කාරක API ( document.querySelector{,all}) සමඟ අනුකූල වීම සඳහා , මෙම අවස්ථාවේදී ගුණාංග අගය ( 22) වටා ඇති උපුටා දැක්වීම් මඟ නොහැරිය හැකි බව සලකන්න .

එසේම, ඔබ ඔබේ jQuery ස්ක්‍රිප්ට් වල දත්ත ගුණාංග සමඟ වැඩ කරන්නේ නම්, ඔබට HTML5 අභිරුචි දත්ත ගුණාංග ප්ලගිනය භාවිතා කිරීම ගැන සලකා බැලීමට අවශ්‍ය වනු ඇත . මෙය භාවිතා කිරීමෙන් ඊටත් වඩා කියවිය හැකි කේතයක් ලිවීමට ඔබට ඉඩ සලසයි .dataAttr('foo'), සහ අවම කිරීමෙන් පසු කුඩා ගොනු ප්‍රමාණයක් ලැබෙනු ඇත (භාවිතයට සාපේක්ෂව .attr('data-foo')).

ගූගල් කිරීම සහ දත්ත-ගුණාංග සමඟ තෝරා ගැනීම පිළිබඳ වඩාත් පොදු නීති අවශ්‍ය පුද්ගලයින් සඳහා:

$("[data-test]")දත්ත ගුණාංගයක් ඇති ඕනෑම අංගයක් තෝරා ගනු ඇත (ගුණාංගයේ වටිනාකම කුමක් වුවත්). ඇතුළුව:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]')දත්ත ගුණාංගයේ අඩංගු foo නමුත් නිශ්චිත විය යුතු නැති ඕනෑම අංගයක් තෝරා ගනු ඇත :

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]')දත්ත ආරෝපණය නිශ්චිත අගය ඇති ඕනෑම අංගයක් තෝරා ගනු ඇත the_exact_value, උදාහරණයක් ලෙස:

<div data-test="the_exact_value">Exact Matches</div>

නමුත් එසේ නොවේ

<div data-test="the_exact_value foo">This won't match</div>

භාවිතා කිරීම $('[data-whatever="myvalue"]')මගින් html ගුණාංග සහිත ඕනෑම දෙයක් තෝරා ගනු ඇත, නමුත් නව jQueries වල ඔබ $(...).data(...)දත්ත ඇමිණීමට භාවිතා කරන්නේ නම් , එය මැජික් බ්‍රව්සරයක් භාවිතා කරන අතර එය html වලට බලපාන්නේ නැත, එබැවින් පෙර පිළිතුරේ.find දැක්වෙන පරිදි එය සොයාගත නොහැක.

තහවුරු කරන්න (1.7.2+ සමග පරීක්ෂා) (ද බලන්න වීණාවක් ): (වැඩි නිම කිරීමට යාවත්කාලීන)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

මම jQuery නොමැතිව ජාවාස්ක්‍රිප්ට් පිළිතුරක් දැක නැත. එය යමෙකුට උපකාරී වේ යැයි බලාපොරොත්තු වෙමු.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

තොරතුරු:

• දත්ත ලක්ෂණ

• .querySelectorAll ();

දත්ත ගුණාංගය සහිත සියලුම නැංගුරම් තෝරා ගැනීමට data-customerID==22, ඔබ aසෙවුම් විෂය පථය එම මූලද්‍රව්‍ය වර්ගයට පමණක් සීමා කිරීමට ඇතුළත් කළ යුතුය . පිටුවේ බොහෝ අංග ඇති විට විශාල ලූපයකින් හෝ ඉහළ සංඛ්‍යාතයකින් දත්ත ආරෝපණ සෙවීම් කිරීම කාර්ය සාධන ගැටළු ඇති කළ හැකිය.

$('a[data-customerID="22"]');

ස්වදේශීය JS උදාහරණ

මූලද්‍රව්‍යයන්ගේ NodeList ලබා ගන්න

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

පළමු අංගය ලබා ගන්න

var firstElem = document.querySelector('[id="container"]')

html: <div id="container"></div>

නෝඩ් ලැයිස්තුවක් ලබා දෙන නෝඩ් එකතුවක් ඉලක්ක කරන්න

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

බහු (OR) දත්ත අගයන් මත පදනම්ව මූලද්‍රව්‍ය ලබා ගන්න

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

ඒකාබද්ධ (AND) දත්ත අගයන් මත පදනම්ව මූලද්‍රව්‍ය ලබා ගන්න

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

වටිනාකම ආරම්භ වන අයිතම ලබා ගන්න

document.querySelectorAll('[href^="https://"]')

Jquery filter () ක්‍රමය හරහා:

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

මේ වගේ ඉදිකිරීම්: සෆාරි 8.0$('[data-XXX=111]') හි වැඩ කරන්නේ නැහැ .

ඔබ දත්ත ආරෝපණය මේ ආකාරයෙන් $('div').data('XXX', 111)සකසන්නේ නම්:, එය ක්‍රියාත්මක වන්නේ ඔබ දත්ත ගුණාංග සෘජුවම DOM තුළ සැකසුවේ නම් පමණි : $('div').attr('data-XXX', 111).

මම හිතන්නේ jQuery කණ්ඩායම කසළ එකතු කරන්නා ප්‍රශස්තිකරණය කර ඇති අතර එක් එක් වෙනස්වන දත්ත ගුණාංග මත මතකය කාන්දු වීම සහ DOM නැවත ගොඩනැඟීමේ අධික මෙහෙයුම් වලක්වනු ඇත.

මෙය ක්‍රෝම් හි වැඩ කිරීමට නම් වටිනාකමට තවත් උපුටා දැක්වීම් යුගලයක් නොතිබිය යුතුය .

එය ක්‍රියාත්මක වන්නේ, උදාහරණයක් ලෙස, මේ ආකාරයට පමණි:

$('a[data-customerID=22]');

සමහර විට මූලද්‍රව්‍යයන් ඒවාට දත්ත අයිතමයන් ක්‍රමලේඛනගත කර තිබේද යන්න මත පදනම්ව පෙරීම යෝග්‍ය වේ (අකා ඩොම්-ගුණාංග හරහා නොවේ):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

ඉහත ක්‍රියා කරන නමුත් එතරම් කියවිය නොහැක. වඩා හොඳ ප්‍රවේශයක් නම් මෙවැනි දේ පරීක්ෂා කිරීම සඳහා ව්‍යාජ තේරීම් කාරකයක් භාවිතා කිරීමයි:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

දැන් අපට මුල් ප්‍රකාශය වඩාත් චතුර ලෙස හා කියවිය හැකි දෙයකට ප්‍රතිනිර්මාණය කළ හැකිය:

$el.filter(":hasData('foo-bar')").doSomething();

'ජීවන තත්වයේ' සමහර අංග සමඟ සියලු පිළිතුරු සම්පුර්ණ කිරීම සඳහා - මේ වන විට (html5- යුගයේ දී) තෙවන පාර්ශවීය නිදහසක් නොමැතිව එය කළ හැකිය:

• querySelector සමඟ පිරිසිදු / සරල JS (CSS- තේරීම් භාවිතා කරයි):
  • DOM හි පළමුවැන්න තෝරන්න: document.querySelector('[data-answer="42"],[type="submit"]')
  • සියල්ල DOM හි තෝරන්න: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• පිරිසිදු / සරල CSS
  • නිශ්චිත ටැග් කිහිපයක්: [data-answer="42"],[type="submit"]
  • නිශ්චිත ලක්ෂණයක් සහිත සියලුම ටැග්: [data-answer]හෝinput[type]