Get Div by Id 和 Id of Div 包含多个值 jquery

Question

我的HTML页面上有一个Div元素，并且该DIV来自 ASP.NET 应用程序，因此DIV ID一直在变化，但该ID中的单词保持不变。

例如：

<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid"> </div>

在上面的例子中，唯一保持不变的是"_UWT"和"_NewGrid"。

我知道如何通过确切 ID 或至少通过在此中使用 1 个单词来获取：$( "div[id$='_UWT']" (

但是我需要通过使用多个参数来获取这个 Div 元素：我还需要检查"_UWT"和"_NewGrid"。如果两个词都存在于 Div id 中，则仅返回我元素。

我需要通过 JQuery 获得这个 DIV。我知道我可以从 ASP.NET 将 ClientID 设置为静态，但这在我的情况下是不可行的。谢谢。

Answer 1

为此，

您可以组合"属性包含"选择器(查找_UWT(和"属性结尾"选择器(查找_WebGrid(，如下所示：

$('div[id*="UWT"][id$="_NewGrid"]').addClass('foo');

.foo {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04_NewGrid">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04_NewGrid">This one</div>

Answer 2

一种方法可能是：

$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red') // do whatever you want with div
}
})

演示：

$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red')
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">11111</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGri">222222222</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__ctl01_ctl00_ctl04
_NewGrid">3333333333333</div>

Answer 3

尝试以下方法：

添加

我在此处添加的特定类item-collection：

<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">Div 1</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Div 2</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 3</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 4</div>

JS是：

    var itemslist = [];
    $(".item-collection").each(function(){
        if($(this).attr("id").indexOf("_UWT") > -1 && $(this).attr("id").indexOf("_NewGrid")){
            itemslist.push($(this))
        }
    })      
    console.log(itemslist);