jQuery如何根据数据属性值查找元素?

clj7thdc  于 2022-12-18  发布在  jQuery
关注(0)|答案(9)|浏览(127)

我有以下的场景:

var el = 'li';

并且在页面上有5个<li>,每个具有data-slide=number属性 (数字分别为1、2、3、4、5)
现在我需要找到当前活动的幻灯片编号,该编号Map到var current = $('ul').data(current);,并在每次更改幻灯片时更新。
到目前为止,我的尝试都没有成功,我试图构造与当前幻灯片匹配的选择器:

$('ul').find(el+[data-slide=+current+]);

不匹配/返回任何内容...
我不能硬编码li部分的原因是,这是一个用户可访问的变量,如果需要,可以将其更改为不同的元素,因此它不一定总是li
你知道我错过了什么吗?

j8ag8udp

j8ag8udp1#

您必须将current的值注入Attribute Equals选择器:

$("ul").find(`[data-slide='${current}']`)

对于较旧的JavaScript环境(ES5及更早版本):

$("ul").find("[data-slide='" + current + "']");
u0sqgete

u0sqgete2#

如果您不想键入所有这些内容,下面是一种按数据属性查询更快捷方法:

$("ul[data-slide='" + current +"']");

仅供参考:http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

km0tfn4u

km0tfn4u3#

使用[data-x=...]进行搜索时,请注意,它不适用于jQuery.data(..)setter

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

您可以改用以下命令:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1
iszxjhcz

iszxjhcz4#

没有JQuery,ES6

document.querySelectorAll(`[data-slide='${CSS.escape(current)}']`);
  • 我知道这个问题是关于JQuery的,但是读者可能想要一个纯JS方法。*
dxxyhpgq

dxxyhpgq5#

我将psycho brm's filterByData extension改进为jQuery。
前一个扩展搜索键-值对,而使用这个扩展,您还可以搜索数据属性的存在,而不管它的值是什么。

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

用法:

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

一个一个二个一个一个一个三个一个一个一个一个一个四个一个
或是小提琴:http://jsfiddle.net/PTqmE/46/

rlcwz9us

rlcwz9us6#

我在使用jQuery和data-* 属性获取元素时遇到过同样的问题。
因此,最短的代码如下所示,供您参考:
这是我的HTML代码:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

这是我的jQuery选择器:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.
ds97pgxw

ds97pgxw7#

此选择器$("ul [data-slide='" + current +"']");将用于以下结构:

<ul><li data-slide="item"></li></ul>

而此$("ul[data-slide='" + current +"']");适用于:
<ul data-slide="item"><li></li></ul>

kadbb459

kadbb4598#

$("ul").find("li[data-slide='" + CSS.escape(current) + "']");

我希望这样可以更好地工作
谢谢

blpfk2vs

blpfk2vs9#

回到他最初的问题,关于如何在不事先知道元素类型的情况下完成这个工作,下面的代码可以做到这一点:

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");

相关问题