Как хранить произвольные данные для некоторых HTML-тегов

Я делаю страницу с некоторым взаимодействием, предоставляемым javascript. Как пример: ссылки, которые отправляют запрос AJAX для получения содержимого статей, а затем выводят эти данные в div. Очевидно, что в этом примере мне нужна каждая ссылка для хранения дополнительного бита информации: идентификатор статьи. То, как я обращался с этим в случае, это включить эту информацию в ссылку href:

<a class="article" href="#5">

Затем я использую jQuery для поиска элементов a.article и присоединяю соответствующий обработчик событий. (не слишком зависеть от удобства использования или семантики здесь, это просто пример)

В любом случае этот метод работает, но он smells немного и вообще не расширяется (что происходит, если функция click имеет более одного параметра? что, если некоторые из этих параметров являются необязательными?)

Очевидным ответом было использование атрибутов элемента. Я имею в виду, для чего они нужны, верно? (Вид).

<a articleid="5" href="link/for/non-js-users.html">

В мой недавний вопрос Я спросил, действительно ли этот метод действителен, и выясняется, что, не указав мой собственный DTD (я этого не делаю), тогда нет, это недействительно или надежно. Общий ответ заключался в том, чтобы поместить данные в атрибут class (хотя это могло быть из-за моего плохо выбранного примера), но для меня это пахнет еще больше. Да, это технически справедливо, но это не очень хорошее решение.

Другой метод, который я использовал в прошлом, состоял в том, чтобы фактически создать JS и вставить его в страницу в теге <script>, создав структуру, которая будет ассоциирована с объектом.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

Но это может быть настоящей болью в прикладе для поддержания и, как правило, очень грязным.

Итак, чтобы ответить на вопрос, , как вы храните произвольные фрагменты информации для HTML-тегов?

Ответ 1

Какую версию HTML вы используете?

В HTML 5 вполне допустимо иметь настраиваемые атрибуты с префиксом -, например

<div data-internalid="1337"></div>

В XHTML это действительно не так. Если вы находитесь в режиме XHTML 1.1, браузер, вероятно, будет жаловаться на это, но в режиме 1,0 большинство браузеров просто молча игнорируют его.

Если бы я был вами, я бы выполнил подход script. Вы можете сделать его автоматически сгенерированным на стороне сервера, чтобы он не болел спиной, чтобы поддерживать.

Ответ 2

Если вы используете jQuery уже тогда, вы должны использовать метод "данных", который является рекомендуемым методом для хранения произвольных данных в элементе dom с помощью jQuery.

Чтобы сохранить что-то:

$('#myElId').data('nameYourData', { foo: 'bar' });

Чтобы получить данные:

var myData = $('#myElId').data('nameYourData');

Это все, что нужно, но посмотрите на документацию jQuery для получения дополнительной информации/примеров.

Ответ 3

Другим способом, я лично не буду использовать это, но он работает (убедитесь, что ваш JSON действителен, потому что eval() является опасным).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Ответ 4

Произвольные атрибуты недействительны, но совершенно надежны в современных браузерах. Если вы настраиваете свойства с помощью javascript, вам также не нужно беспокоиться о проверке.

Альтернативой является установка атрибутов в javascript. jQuery имеет отличный метод утилиты только для этой цели, или вы можете использовать свой собственный.

Ответ 5

Взлом, который будет работать практически со всеми возможными браузерами, - это использовать открытые классы следующим образом: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

Это не все, что элегантно для пуристов, но оно универсально поддерживается, стандартно и очень легко манипулировать. Это действительно лучший способ. Если вы serialize, измените, скопируйте теги или сделайте что-нибудь еще, data останется прикрепленным, скопированным и т.д.

Единственная проблема заключается в том, что вы не можете хранить несериализуемые объекты таким образом, и могут быть ограничения, если вы разместите там что-то действительно огромное.

Второй способ - использовать поддельные атрибуты, такие как: <a articleid='5' href="link/for/non-js-users.html">

Это более элегантно, но нарушает стандарт, и я не уверен на 100% о поддержке. Многие браузеры поддерживают его полностью, я думаю, что IE6 поддерживает JS доступ для него, но не CSS selectors (что на самом деле не имеет значения здесь), возможно, некоторые браузеры будут полностью запутаны, вам нужно его проверить.

Выполнение забавных вещей, таких как сериализация и десериализация, будет еще более опасным.

Использование ids для чистого хеша JS в основном работает, за исключением случаев, когда вы пытаетесь скопировать свои теги. Если у вас есть tag <a href="..." id="link0">, скопируйте его с помощью стандартных методов JS, а затем попробуйте изменить data, прикрепленный только к одной копии, другая копия будет изменена.

Это не проблема, если вы не копируете tag s или используете только данные для чтения. Если вы скопируете tag, и они будут изменены, вам придется обрабатывать это вручную.

Ответ 6

Используя jquery,

для хранения: $('#element_id').data('extra_tag', 'extra_info');

для извлечения: $('#element_id').data('extra_tag');

Ответ 7

Я знаю, что вы в настоящее время используете jQuery, но что, если вы определили встроенный обработчик onclick. Тогда вы можете сделать:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Ответ 8

Вы можете использовать скрытые теги ввода. Я не получаю ошибок проверки в w3.org с этим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

С jQuery вы получите идентификатор статьи с чем-то вроде (не протестированным):

$('.article input[name=articleid]').val();

Но я бы рекомендовал HTML5, если это вариант.

Ответ 9

Почему бы не использовать уже существующие значимые данные вместо добавления произвольных данных?

то есть. используйте <a href="/articles/5/page-title" class="article-link">, а затем вы можете программно получить все ссылки на странице (через имя класса) и идентификатор статьи (соответствующие регулярному выражению /articles\/(\d+)/ против this.href).

Ответ 10

Как пользователь jQuery я бы использовал плагин метаданных. HTML выглядит чистым, он проверяет, и вы можете вставлять все, что может быть описано с использованием нотации JSON.

Ответ 11

Таким образом, для этого должны быть четыре варианта:

Поместите данные в атрибут id.
Поместите данные в произвольный атрибут
Поместите данные в атрибут класса
Поместите ваши данные в другой тег

http://www.shanison.com/?p=321

Ответ 12

Я защищаю использование атрибута rel. XHTML проверяет, сам атрибут редко используется, и данные эффективно извлекаются.

Ответ 13

Это хороший совет. Благодаря @Prestaul

Если вы используете jQuery уже, тогда вы должны использовать "данные", метод, который является рекомендуемым методом для хранения произвольных данных на dom с jQuery.

Очень верно, но что, если вы хотите хранить произвольные данные в обычном HTML? Вот еще одна альтернатива...

<input type="hidden" name="whatever" value="foobar"/>

Поместите свои данные в атрибуты имени и значения скрытого элемента ввода. Это может быть полезно, если сервер генерирует HTML (т.е. PHP script или что-то еще), и ваш код JavaScript будет использовать эту информацию позже.

Правда, не самый чистый, но это альтернатива. Он совместим со всеми браузерами и является действительным XHTML. Вы должны НЕ использовать пользовательские атрибуты, а также не должны использовать атрибуты с префиксом "data-", так как это может не работать во всех браузерах. Кроме того, ваш документ не будет проходить проверку W3C.

Ответ 14

Вы можете использовать префикс данных собственного атрибута случайного элемента (<span data-randomname="Data goes here..."></span>), но это допустимо только в HTML5. Таким образом, браузеры могут жаловаться на достоверность.

Вы также можете использовать тег <span style="display: none;">Data goes here...</span>. Но таким образом вы не можете использовать функции атрибута, и если css и js отключены, это тоже не простое решение.

Но я лично предпочитаю следующее:

<input type="hidden" title="Your key..." value="Your value..." />

Ввод во всех случаях будет скрыт, атрибуты полностью действительны, и он не будет отправлен, если он находится в теге <form>, так как он не имеет никакого имени, верно? Прежде всего, атрибуты очень легко запомнить, и код выглядит красивым и понятным. Вы даже можете поместить в него ID-атрибут, чтобы вы могли легко получить к нему доступ с помощью JavaScript, а также получить доступ к паре ключ-значение с помощью input.title; input.value.

Ответ 15

Возможна одна возможность:

Создайте новый div для хранения всех расширенных/произвольных данных
Сделайте что-нибудь, чтобы убедиться, что этот div невидим (например, CSS плюс атрибут класса div)
Поместите расширенные/произвольные данные в теги HTML [X] (например, как текст внутри ячеек таблицы или что-нибудь еще, что вам может понравиться) внутри этого невидимого div

Ответ 16

Другим подходом может быть сохранение пары ключ: значение как простой класс с использованием следующего синтаксиса:

<div id="my_div" class="foo:'bar'">...</div>

Это допустимо и может быть легко загружено с помощью селекторов jQuery или специально созданной функции.

Ответ 17

У моего предыдущего работодателя мы постоянно использовали пользовательские теги HTML для хранения информации об элементах формы. Улов: Мы знали, что пользователь был вынужден использовать IE.

В тот момент это не сработало хорошо для FireFox. Я не знаю, изменила ли это FireFox это или нет, но имейте в виду, что добавление собственных атрибутов в HTML-элементы могут или не могут поддерживаться браузером вашего читателя.

Если вы можете управлять браузером, который использует ваш читатель (т.е. внутренний веб-апплет для корпорации), то, во что бы то ни стало, попробуйте. Что может повредить, правильно?

Ответ 18

Вот как я делаю вам страницы ajax... его довольно простой метод...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

Как это работает, он в основном рассматривает все URL-адреса, которые имеют класс "ajx", и он заменяет ключевое слово и добавляет знак #... поэтому, если js отключен, тогда URL-адреса будут действовать, как обычно. все "приложения" (каждый раздел сайта) имеют свое собственное ключевое слово... так что все, что мне нужно сделать, это добавить в массив js выше, чтобы добавить больше страниц...

Итак, например, мои текущие настройки установлены на:

 var objApps= ['ads','user'];

Итак, если у меня есть url, например:

www.domain.com/ads/3923/bla/dada/bla

js script заменит /ads/part, поэтому мой URL-адрес будет

www.domain.com/ads/#p=3923/bla/dada/bla

Затем я использую плагин jquery bbq для загрузки страницы...

http://benalman.com/projects/jquery-bbq-plugin/

Ответ 19

Я нашел плагин метаданных отличным решением проблемы хранения произвольных данных с тегом html таким образом, чтобы он легко извлекался и использовался с jQuery.

Важно. Фактический файл, который вы включаете, составляет всего 5 кб, а не 37 кб (это размер полного пакета загрузки).

Вот пример того, как он используется для хранения значений, которые я использую при создании события отслеживания Google Analytics (примечание: data.label и data.value являются необязательными параметрами)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

Ответ 20

В html мы можем хранить пользовательские атрибуты с префиксом "data-" перед именем атрибута, например

<p data-animal='dog'>This animal is a dog.</p>. Проверьте документацию

Мы можем использовать это свойство для динамической установки и получения атрибутов, используя jQuery, например: Если у нас есть тег p, как

<p id='animal'>This animal is a dog.</p>

Затем, чтобы создать атрибут "breed" для вышеуказанного тега, мы можем написать:

$('#animal').attr('data-breed', 'pug');

Чтобы получить данные в любое время, мы можем написать:

var breedtype = $('#animal').data('breed');

Ответ 21

Если ваша реальная работа выполняется на стороне сервера, зачем вам вообще нужна пользовательская информация в тегах html в выходных данных? Все, что вам нужно знать на сервере, - это указатель на любой список структур с вашей пользовательской информацией. Я думаю, что вы хотите хранить информацию не в том месте.

Я признаю, как ни прискорбно, что во многих случаях правильное решение не является правильным. В этом случае я настоятельно рекомендую создать некоторый javascript для хранения дополнительной информации.

Много лет спустя:

Этот вопрос был опубликован примерно за три года до того, как атрибуты data-... стали верным вариантом с появлением html 5, поэтому правда изменилась, и первоначальный ответ, который я дал, больше не актуален. Теперь я бы предложил использовать атрибуты данных.

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>