从包含中查找替代选择器

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 或 body 时停止的方法。

它将创建如下选择器：

#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

从包含中查找替代选择器

Finding alternate selectors from contains

jquery

cheerio