jquery - 查找具有动态 ID 的元素

Question

我想在 jquery 中创建一个通用函数来选择所有功能。我的网页中有一个选项卡式 View 。

我的组件的 ID 是:tabId:someDynamicId:rowId:componentId其中，someDynamicId是动态生成的。

所以在jquery中我想找到id以-tabId:someDynamicId开头并以componentId结尾的元素。并且，tabId、someDynamicId 和 componentId 将作为参数传递给需要查找此元素的通用函数。

Answer 1

很简单:

$('[id^=tabId][id$=componentId]').each(function(){
    var id = $(this).attr('id'); // tabId:someDynamicId:rowId:componentId​
    var list = id.split(':');​​

    console.log(list[0]); // tabId
    console.log(list[1]); // someDynamicId
    console.log(list[2]); // rowId
    console.log(list[3]); // componentId​
})

Wildcards in jQuery selectors

但我建议使用正确的工具来完成这项工作。 ID 对于查找特定元素很有用，但在您的情况下，最好使用一两个类和数据属性。例如:

<div class="tabs" data-component-id="x" data-tab-id="y">

然后找到所有 $('.tabs') 元素并使用 $(this).data('component-id') 和 $(this).data('tab-id')

$('.tabs').each(function(){
    var component_id = $(this).data('component-id');
    var tab_id = $(this).data('tab-id');
});

更新:

有一个使用它作为函数的示例:

function(tabId,componentId) {
    $('[id^='+tabId+'][id$='+componentId+']').each(function(){
        var id = $(this).attr('id'); // tabId:someDynamicId:rowId:componentId​
        var list = id.split(':');​​

        console.log(list[0]); // tabId
        console.log(list[1]); // someDynamicId
        console.log(list[2]); // rowId
        console.log(list[3]); // componentId​
    })  
}