jquery selector for "#id_article-DYNAMIC_NUMBER-media_d

jquery selector for "#id_article-DYNAMIC_NUMBER-media_description_DYNAMIC_CHAR"

本文关键字：article-DYNAMIC NUMBER-media #id selector for quot jquery      更新时间：2023-09-26

页面上有许多元素的ID看起来像

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

例如：

id_article-0-media_description_en

其中CCD_ 1和CCD_。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的末尾还有另一个动态部分，即语言部分

使用Starts with with the combination of ends with attribute selector。 

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

如果DOM中有其他元素同时满足前缀和后缀条件，但它们之间不包含数字，则也可以将00与regex一起使用。

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

您实际上应该为此使用一个类。

一种解决方法是将所有元素与以[id^='id_article']开头的id匹配，然后使用正则表达式确定它是否也包含一个后面跟着-media_description_(en|es|de)的数字

/^id_article-'d+-media_description_(en|es|de)$/


$("[id^='id_article']").each(function () {
  if (this.id.match(/^id_article-'d+-media_description_(en|es|de)$/)) {
    // It's a match
    $(this).css('color', '#f00');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id_article-0-media_description_en">0 (en)</div>
<div id="id_article-1-media_description_de">1 (de)</div>
<div id="id_article-333-media_description_es">333 (es)</div>
<div id="id_article-NAN-media_description">NaN</div>

相关文章：