这似乎对JQuery来说应该是微不足道的,但是这个函数隐藏了整个表单......有人能指出我正确的方向吗？

$('form')
        .children()
        .filter(function(){
            return $(this).data('show', 'pro')
        })
        .show();
$('form')
         .children()
         .filter(function(){
             return $(this).data('show', 'home')
         })
         .hide();

我希望能够data-type使用纯javascript 检索,这是一个新的HTML5标记名称(或任何自定义标记名称).我需要访问此数据的上下文来自元素childNodes的循环.

var children = document.getElementById('foo').childNodes;
for(var i=0; i<children.length; i++) {
    var dataType = children[i].dataType //This does not work.
}

有没有一些原型的方法,childNodes以便使用该标签检索的任何元素将dataType附加一个函数,以便上述代码实际上可以工作？

我想我将不得不使用children[i].outerHTML获取元素的原始HTML,然后使用正则表达式来实际放置元素的值.

在我正在创建的一个相当复杂的HTML5 webapp中,我发现向一些文档元素添加一些自定义属性很方便.使用jQuery,我发现我可以毫无问题地检索这些属性 - 到目前为止,Chrome,Safari和Firefox,以及我希望,也可以在Android/iPhone移动浏览器上.

问题 - 是这样的用法,注入自定义属性,确定或者我会破坏某些内容.为了理解上下文,我使用jQuery Mobile,使用jQuery和一些jQuery插件.

在相关的说明中,我假设可以使用jQuery检索具有指定属性的所有元素？

我刚开始使用data-*属性来存储View所需的自定义属性和值.例如 .

<div id='someId' data-ItemValues='SomeValues'>
</div> 

基于data-*我正在做一些操作(CRUD).如果用户在客户端(即使用firebug和其他一些开发人员工具从浏览器中)更改了data-*属性值,该怎么办？我只是想知道,我们需要遵循什么标准,或者想知道社区如何处理这种情况.

更新:

我也将在服务器端验证.但在某些情况下.数据不存储在服务器中.它会被标记出来.只有当用户点击保存按钮时才会保存.

我将从javacript中选择数据并使用ajax将值发送到服务器.但我担心的是,如果用户更改了data-*属性中的值,那么即使服务器端验证也会满足要传递的规则.那我怎么防止他们？

我正在使用jQuery来过滤页面上的产品项目(隐藏和显示DIV)我使用过滤器作为替代,因为PHP $ _GET有点旧,我们正试图通过jQuery来做到这一点.我使用filter()和data属性.

如何关闭除现有项目之外的当前复选框选项？如何根据选择隐藏项目,何时不隐藏？

HTML

<input type="checkbox" id="drama" onClick="filterCategory(this.value)" value="drama" /> Drama<br />
<input type="checkbox" id="romance" onClick="filterCategory(this.value)" value="" /> Romance<br />
<input type="checkbox" id="horror" onClick="filterCategory(this.value)" value="horror" /> Horror<br />

<!--------------------->
<div class="products">
    <div class="productItem" data-price="250" data-category="horror">
        Scary Book
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="150" data-category="drama">
        Drama Poems
        <div class="productItemPrice"><span>&pound;150</span></div>
    </div>
    <div class="productItem" data-price="250" data-category="romance">
        Love Story
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="241" data-category="horror">
        Creep Book
        <div class="productItemPrice"><span>&pound;241</span></div>
    </div>
</div>
<!--------------------->

jQuery的

function filterCategory(id) {
    var pid=$(".productItem"); // Which product is …

当我向一个元素添加一个data-itemid属性时,我找不到该元素

$('someSelector').find( '[data-itemid="' + itemid + '"]' )

干

$('#id-of-element-i-added-the-attribute-to').data('itemid')

返回正确的数据.

$('#id-of-element-i-added-the-attribute-to').attr('data-itemid')

返回一个空字符串.

$('someSelector').find( '[data-itemid="' + itemid + '"]' ) 适用于最初具有该数据短划线属性的元素,但不适用于动态添加的属性.

我添加这样的属性 $('#'+listItemId).data('itemid', itemId);

如何找到具有特定值的动态添加的data-itemid属性的元素.

这个选择器也不起作用(它们返回空数组):

$('*').find( '[data-itemid="' + itemid + '"]' )
$('[data-itemid="' + itemid + '"]' )
$('[data-itemid="16"]' )

以下是HTML:

<div style="visibility: hidden;">
 <span id="myId" data-recipientId="2"></span>
</div>

这是jQuery:

var recipientId = $("#myId").data("recipientId");

我注意到这recipientId总是未定义的 ......

我有这个具有多个数据属性的按钮,我想通过基于类和两个数据属性选择它来隐藏它.

<a href='#' class='wishlist-icon' data-wish-name='product' data-wish-url='/product'>Button</a>

$(".wishlist-icon [data-wish-name='product'] [data-wish-url='/product']").hide();

我不知道为什么这个选择器不起作用.

DEMO

我想按列表项(li)实现一个检查列表.我使用data-checked属性来保持检查状态.我用css选择器设置图标颜色('true'=黑色和'false'=白色).

页面显示时工作正常,所有任务都显示白色图标,因为其默认数据检查值为"false".但是,当我单击列表项时,数据检查的值将被修改为"false",但颜色不会更改为黑色.

我通过提醒他们检查了价值.他们是正确的.

我究竟做错了什么？

谢谢.

HTML:

<ul>
  <li data-id='1' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task A</span>
  </li>
  <li data-id='2' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task B</span>
  </li>
</ul>
<button onclick='show_checked();'>Done</button>

CSS:

ul li[data-checked='true'] i:first-child {
  color: #000000;
}
ul li[data-checked='false'] i:first-child {
  color: #eeeeee;
}

使用Javascript:

function toggle_task(sender) {
  if ($(sender).data('checked').toString == 'true') {
    $(sender).data('checked','false');
  } else {
    $(sender).data('checked','true');
  }
}
function show_checked() {
  $(li).each(function() {
    var text = $(this).data('id').toString() + ': ' + $(this).data('checked').toString();
    alert($(this).data('checked'));
  });
}

我正在尝试使用CasperJS测试页面.是否有可能获得包含属性数据-...的每个元素(段落)？之后,我需要将此属性与内部HTML进行比较,但我不知道该怎么做.