方法来使用jQuery选择匹配的数据元素

Method to select matching data elements using jQuery

本文关键字：数据 元素 选择 jQuery 方法      更新时间：2024-03-30

我是jQuery的新手，有一个超出我所知范围的问题。我有一个具有唯一数据编号的链接和一个具有匹配数据编号的div。目标是隐藏所有div，当用户单击每个链接时，div将显示匹配的数据编号。

我很难理解的部分是如何迭代所有链接和匹配它们的div，这样当单击每个链接时，只会显示具有相同数据编号的匹配div。

以下是我目前在Coffescript:中的内容

    $('#task-item').on('click', (event) ->
    n = $(@).data('number')
    if (n > 0)
        event.preventDefault()
        $('#task-info').fadeToggle(600)
    )

示例html链接：

<li id="task-item" data-number="3">
   <span class="label label-purple"> Task</span>
     <i class="icon-angle-right"></i> 
       <span class="label label-success">Open</span> 
         <a href="#" id="task-desc">NEW SAVE METHOD FOR TASKS</a> 
    ..... additional HTML....
</li>

示例div html:

<div id="task-info" data-number="3" class="span8">
  ..... #MORE HTML HERE ....
</div>

如果有更好的方法来实现这一点，我愿意接受任何建议。

首先，我假设您的示例中的li和div重复多次，因此您应该使用class来识别它们。其次，可以使用filter根据所需的数据属性查找元素。试试这个：

$('.task-item').on('click', (event) ->
    var $item = $(this);
    $('.task-info').filter(function() {
        return $(this).data('number') == $item.data('number');
    }).fadeToggle(600);

查看jQuery属性选择器

http://api.jquery.com/attribute-equals-selector/

您应该能够像这样选择您想要的div：

$("div[data-value='3']")

我建议的第一件事是将li id更改为类似<li class="task-item"> 的类

然后

<div class="task-info" data-number="3" class="span8">

JS-

$(".task-item").click(function(e){
  var itemNumber=$(this).data('number');
  $('.task-info').filter(function() {
    return $(this).data('number') == itemNumber
  }).fadeToggle(600);
});
相关文章：