jquery css 选择器匹配 id 包含最后一个点后的特定文本的元素

Question

我需要为 jquery 编写 css 选择器，以匹配 id 在最后一个点后包含一些文本的元素。类似于 $(div[id*='cow']) 的东西 - 但更强，因为只有当文本在最后一个点之后时我才需要它匹配。所以把最后一个点之后的所有内容都拿走，看看文本是否包含我的字符串。例如要查找的文本 - cow

<div id ='my.very.first.cow'></div> // get it
<div id = 'my.very.first.cowandcat'></div> //get it
<div id = 'my.very.firstcow.andcat'></div> //DON'T get it - not after the last dot

Answer 1

匹配以 .cow

结尾的任何内容

div[id$='.cow'] {background-color: blue}

Answer 2

我不确定我是否理解你的问题，但如果有帮助，试试这个。

$("div").each(function(){ 
 var item = $(this);
  var arr = item.attr("id").split('.');  
  console.log(arr)
  n = arr[arr.length-1].indexOf("cow");
  if(n!=-1)
  {
   alert(item.attr("id"));      
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ='my.very.first.cow'></div> // get it
<div id = 'my.very.first.cowandcat'></div> //get it
<div id = 'my.very.firstcow.andcat'></div> //DON'T get it - not after the last dot

Answer 3

你可以这样做：

var ids = $('div');
$.each(ids,function(index,value){
  var ids_split = this.id.split('.'), id_length = ids_split.length, last_class=ids_split[id_length-1], search_term = "cow";
if (last_class.includes(search_term)) {

    $(this).addClass('cows_only');  
  
     // only .cow is selected 
} 

});

<div id ='my.very.first.cow'></div> // get it
<div id = 'my.very.first.cowandcat'></div> //get it
<div id = 'my.very.firstcow.andcat'></div> //DON'T get it - not after the last dot

这会迭代您的 div 并获取其最后一个 .在某处有 "cow"。这是一个 fiddle： jsfiddle

注意类如何只添加到最后一个点后带有 "cows" 的 div。

Answer 4

您可以使用以下方式扩展选择器：

$.extend($.expr[':'],{......

片段：

;(function($){
    $.extend($.expr[':'],{
        IdTextAfterLastDot: function(a, b, c) {
            var id = a.id;  // get current ID
            var sel = c.pop();  // get the parameter
            var idx = id.substr(id.lastIndexOf('.') + 1).indexOf(sel);
            //
            // If after last dot the id text starts with ....
            //
            return idx == 0;
        }
    });
})(jQuery);


//
// Use the new selector
// 

$('div:IdTextAfterLastDot(cow)').each(function(idx, ele) {
    console.log('selected: ' + ele.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id ='my.very.first.cow'></div>
<div id = 'my.very.first.cowandcat'></div>
<div id = 'my.very.firstcow.andcat'></div>

jquery css 选择器匹配 id 包含最后一个点后的特定文本的元素

jquery css selector to match elements with id contains specific text after the last dot

jquery

jquery-selectors