javascript - "#id_article-DYNAMIC_NUMBER-media_description_DYNAMIC_CHAR"的 jquery 选择器

Question

我在页面上有很多 ID 看起来像这样的元素

id_article-     Number    -media_description     _en
^^^^^^^^^^^     ^^^^^^    ^^^^^^^^^^^^^^^^^^     ^^^
Fixed Prefix   Variable       Fixed part         Variable
                Number                           part

例如:

id_article-0-media_description_en

其中 0 和 en 是动态的。 0 可以是 1, 2, 3, 4.. 而 en 可以是 de, es 等等

$("[id^='id_article-0-media_description']").each(function () {
    var $el = $(this);
    var lang = this.id.split('_').pop();
    if($.trim($el.val())) {
        var a = '#tab_id_article-0-media_description_' + lang;
        $('a[href="' + a + '"]').css('background', 'green');
    }
});

这行得通。但不够动态，因为id_article-0-media_description，0可以是1、2、3， .....

我试过:

$("[id^='id_article']").each(function () {
    var $el = $(this);
    var lang = this.id.split('_').pop();
    var id = this.id.split('-')[1]; // <----
    if ($.trim($el.val())) {
        var a = '#tab_id_article-'+id+'-media_description_' + lang;
        $('a[href="' + a + '"]').css('background', 'green');
    }
});

但它不起作用。我认为问题的关键在于，我应该这样做:

$("[id^='id_article-0-media_description_en']").each(function () {
    // ...
});

如何使这个选择器通用？

已更新 抱歉，我忘了说 id 的末尾还有另一个动态部分，即语言部分

Answer 1

使用带有属性选择器的结束组合开始。

$("[id^='id_article-'][id$='-media_description']").each(function () {

<罢工>

---

您还可以使用 filter如果 DOM 中有其他元素同时满足前缀和后缀条件但不包含它们之间的数字，则使用正则表达式。

var regex = /^id_article-\d+-media_description_[a-z]{2}$/;

// Narrow down elements by using attribute starts with and ends with selector
var allEls = $("[id^='id_article-']").filter(function () {

    // filter the elements that passes the regex pattern
    return regex.test($(this).attr('id'));
}).each(// Further code