我在我的HTML中使用了一些自定义属性,用于jquery操作。我看到在HTML5中有data-XYZ
属性,但我需要符合xhtml 1.0 strict标准。我还有哪些选项?
我在我的HTML中使用了一些自定义属性,用于jquery操作。我看到在HTML5中有data-XYZ
属性,但我需要符合xhtml 1.0 strict标准。我还有哪些选项?
<li class="someclass {some: 'data'} anotherclass">...</li>
然后在您的jQuery中,要获取数据:
var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
alert('It Worked!');
<div data1="val1">
,然后我执行了$('div[data1=val1]')
;现在我有<div class="{data1: 'val1'}">
,我该如何选择相同的内容? - cambraca<div class="data1 {data: 'val1'}">
,然后通过 var myVal = $('div.data1').metadata().data;
进行选择,这将使 myVal = 'val1'。要获得与 $ ('div[data1=val1]')
相同的效果,您必须手动循环遍历所有与 $ ('div.data1')
匹配的元素,这与 jQuery 内部执行的操作相同,因此不应该更慢。 - Jess Telford我能想到几个选项。
假设您想要用于脚本的特定于站点的自定义属性,一种方法是将脚本嵌入到要添加属性的元素中。例如:
<span id="myId1"><script type="text/javascript">
var myId1Span = document.getElementById("myId1");
myId1Span.myData = {};
myId1Span.myData.firstname = "John";
myId1Span.myData.surname = "Smith";
</script>My Text</span>
<span class="myCssClass http://example.com/hasData
data-firstname:John data-surname:Smith">My Text</span>
如果你正在使用数据进行脚本编写,那么你可以添加以下脚本来提取这些数据。你可以在结束的 body 标签之前添加这个脚本。
<script type="text/javascript">
//<![CDATA[
if (! document.getElementsByClassName)
{
// From http://lawrence.ecorp.net/inet/samples/js-getelementsbyclassname.shtml
document.getElementsByClassName = function(class_name)
{
var docList = this.all || this.getElementsByTagName('*');
var matchArray = new Array();
var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
for (var i = 0; i < docList.length; i++)
{
if (re.test(docList[i].className) )
{
matchArray[matchArray.length] = docList[i];
}
}
return matchArray;
}
}
var hasData = document.getElementsByClassName("http://example.com/hasData");
for (var i = 0 ; i < hasData.length ; i++)
{
var myElem = hasData[i];
myElem.myData = {};
var dataClassList = myElem.className.split(" ");
for (var j = 0 ; j < dataClassList.length ; j++)
{
var dataCandidate = dataClassList[j];
if (dataCandidate.substring(0, 5) == "data-")
if (dataCandidate.indexOf(":") >= 0)
{
var nameValue = dataCandidate.split(":", 2);
myElem.myData[nameValue[0].substring(5)] = nameValue[1];
}
}
}
//]]>
</script>
这应该会导致与第一个选项相同的myData
对象被添加到span中。
http://example.com/hasData类只是一个标志,用于指示哪些元素应该被处理。您可以为此目的使用任何字符串。
这两种方法都符合XHTML 1.0 Strict标准,无论是作为text/html
还是application/xhtml+xml
提供服务都可以正常工作。
$(..).data(x, y)
将数据存储在元素中,您知道是否有一种方法可以直接将可被jQuery读取的数据放入html中吗?(也许有一些使用您类解决方案的插件之类的东西..) - cambraca这里提供了一个符合XHTML 1.0标准的解决方案。
<li class="someclass someData anotherclass">...</li>
结合
<style>
someData {
--custom-some: data
}
</style>
或者直接在元素上使用样式属性。
注意1:类属性的语法不允许json元数据。开放的花括号不是有效的NMToken。 注意2:元数据中的属性名称前面加上--custom-,以避免CSS内容本身的验证问题。
就我看来,如果我将其作为text/html
提供服务,那么它是否符合XHTML规范并不重要,因为它无论如何都不会是真正的XHTML。在99%的XHTML使用情况下都是如此。
只要您没有关键错误,例如缺少结束标记等,您就不必担心验证器告诉您什么,只要您知道原因即可。 XHTML 1.0规范是多年前编写的。技术发展迅速。如果您限制自己使您的网站在规范编写时“有效”,则永远无法使用新功能。
虽然我的真正建议是切换到HTML 5-据我所知,xhtml语法与HTML 5兼容。可能会有一些小的不一致性,但大部分应该是一个相当简单的过渡。
<element data-usage='for an example' data-number='28' />
这是完全有效的XHTML strict(我在我的网站上使用它)。 这样做的目的是为了防止W3C出现一个与您在网站上使用的名称相同的属性并破坏它。
要在JavaScript中获取值,您需要使用elem.getAttribute('data-name');
。 W3M规范确实包括使用ele.dataset.name
,但目前尚未被广泛支持的浏览器。