Question

我有一个通过contains选择器获得的元素列表。我们想说我想知道如何在个人资料页面上访问某个人的姓名。我可以用自己的名字测试自己的个人资料。

let name = $(':contains(jamie)');

我希望根据上述结果存储选择器，该选择器可用于从任何配置文件中检索名称。

如果没有遍历DOM并计算选择器，是否有另一种方法可以为contains查询中的每个元素获取（单个或列表）选择器？

Answer 1

尝试为每个预期元素添加唯一属性;然后可以通过过滤唯一属性值来设置元素

$(function() {
var elem = "<span class=profile data-uuid=123>Jamie Dixon</span>"
$("body").append(elem);
// `let` name ..
var name = $.map($(":contains(Jamie Dixon)"), function(uuid, i) {
  return $(uuid).data("uuid")
});

$("[data-uuid=" + name[0] + "]").css("color", "blue"); // do stuff
  })

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

Answer 2

这是一种方法，它可以使单个元素的父母走近，并在遇到ID或正文时停止。

它将创建选择器，如：

#test > div:eq(0) > ul:eq(0) > li:eq(2)

JS

var $el = $('li:contains(3)');
var selectors=[];
selectors.push(getSelector($el));

$el.parents().each(function(){
    var $node = $(this);
    selectors.push(getSelector($node));
    if($node.is('body') || $node[0].id ){       
        return false
    }    
});

var selector = selectors.reverse().join(' > ');
console.log(selector);
/* test selector in DOM */
$(selector).css('color','red')


function getSelector($el){
    var id = $el[0].id;  
    if(id){
       return '#' +id;  
    }        
    if($el.is('body')){
       return 'body';
    }        
    return $el[0].tagName.toLowerCase() +':eq(' + $el.index() +')';        
}

使用额外的循环，可以将具有相同选择器格式的多个元素组合成逗号分隔的选择器

的 DEMO

从contains中查找备用选择器

2 个答案: