发表新帖
发表新帖

html & [removed] How to store data referring to html elements

前端 未结
关注
8 1145
悲哀的现实
悲哀的现实 2020-12-31 15:29

I\'m working on a web application that uses ajax to communicate to the server. My specific situation is the following:

I have a list of users lined out in the html p

相关标签:
8条回答
  • 一向
    2020-12-31 15:50

    jQuery Data

    If you want to store custom data against a jQuery object, use the data function.

    $('#myField').data('name', 'Jack');
var name = $('#myField').data('name');

    HTML5 data-* Attributes

    You can also use the HTML5 data-* attributes, though the APIs for accessing these are only partially supported by the different browsers. Here's some more information about that.

    <div data-userid="123" class="user-row">

    programmatically:

    $('#myElement').attr('data-fruit', 'apple');
// or
document.getElementById('myElement').dataset.fruit = 'apple';

    Hidden Fields

    If you want to do things the old browser-compatible way and stuff the metadata directly into your html, you can use hidden fields. It's a bit cruder but easy enough to do.

    <input type="hidden" name="UserID" value="[userid]" />

    You can easily use jQuery selectors to query your list and find html blocks that contain user items that have the relevant hidden fields that match the metadata you are querying for.

    0 讨论(0)
  • 臣服心动
    2020-12-31 15:51

    There is jQuery's data function

    $('li').data('userid',uid); // sets the value of userid
uid = $('li').data('userid'); // retrieves the value of userid

    official documentation: http://docs.jquery.com/Data

    0 讨论(0)
  • 北荒
    2020-12-31 15:52

    To answer the question of "how to get it into the document in the first place", I suggest a layout similar to this:

    <ul id="users">
    <li id="someUserId" class="someStatus">Some Username</li>
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li>
</ul>

    This allows you to easily select a lot of info about your users: 

    $('#users > li') // all user elements
$('.someStatus') // all users of a particular status

    Then in your event handlers it's also easy to get the current status:

    $(this).attr('class') //get current status once you have a user element selected.

    Another alternative is to dump javascript to the page and simply have it use the jquery data functionality to store the data as soon as the page loads. You'd still need an id on the element in order to find the right one though.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-31 16:04

    There is a lot of debate as to what is best to use. You can store the data a lot of ways, and they all make someone happy - custom attributes will of course not validate if you use XHTML, and using classes to store one or two bits of data is clumsy at best and only gets worse with the amount of things you want to know. Personally, not only am I not a big fan of XHTML, I am also not much of a validation nazi, so I recommend going with the custom attributes.

    There is, however, an option that reconciles custom attributes with standards: data- attributes. As John Resig (the author of jQuery) writes about in his blog, this is a new attribute being introduced in HTML5 that allows you to specify custom data attributes with the data- prefix. So a perfectly valid element might look like this:

    <ul>
    <li data-userid='5' data-status='active'>Paolo Bergantino</li>
</ul>

    This has the upside that while you are still using custom attributes which may be bad if you are using XHTML, your code is going to age very well as this is the way that we will be storing data related to a particular item in the future.

    Some further reading is Attributes > Classes: Custom DOM Attributes for Fun and Profit.

    0 讨论(0)
  • 野性不改
    2020-12-31 16:04

    The metadata plugin to jquery is your answer.

    <html >
<head>
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.metadata.js"></script>
</head>
<body>
<ul>
<li type="text" class="{UID:'1',status:'alive'}">Adam</li>
<li type="text" class="{UID:'2',status:'alive'}">Bob</li>
<li type="text" class="{UID:'3',status:'alive'}">Carol</li>
</ul>
<script>
$('li').each(function(){window.console.log($(this).metadata().UID)});
</script>
</body>
</html>
    0 讨论(0)
  • 悲哀的现实
    2020-12-31 16:05

    There are various ways of doing it depending on the kind of data you are storing and how much information you are storing in the page in general. It's best to devise a consistent scheme so you can write a simple library call to do the work. For example,

    You can store data in the class of a particular element. This may require additional wrapper elements in order to be able to provide an additional class to drive your CSS. This also restricts the storable content format. User ID may well fit into a class attribute.

    You can store data in an unused href of a Javascript activated link. This has the additional feature of showing the data in the status bar as part of the URL on rollover. For instance you can store '#userid' or even just 'userid' in the href.

    You can store data in additional elements. For instance you can have a nested div with a class that indicates storage which also triggers CSS to take the element out of the display. This is the most general and extensive support you can probably arrange in page.

    Rather than a nested div you could also use nested input tags with type="hidden". This is kind of more expected / traditional and doesn't require CSS to take them out of the display. You can use the id attribute to identify these inputs, or you can use the location on the page. For instance, put them inside the link that the user clicks and then just search inside the current link in the onclick handler.

    0 讨论(0)
 看不清?
提交回复
热议问题