如何定位一个特定的元素，而不知道它的类或id，但却知道该元素的所有DOM细节

Question

为了放置一个外部小部件，而不必让非技术人员将嵌入代码粘贴到网页上的每个期望位置，我正在使用一个可视化的div和p标记选择器，人们可以在其中精确定位期望的元素。

当人们悬停在一个元素上时，它会显示一个红色的边框，向他们显示所选择的内容。

对于我们放置小部件，通常我们将以class或id为目标。然而，class/id应该是唯一的，这样它才能工作，而随机 p标记的唯一类非常罕见。

通过一段jquery代码：

$(document).on('mouseenter mouseleave', '.sj-highlight', 
function (e) {

}

我可以获取有关所选元素的DOM详细信息。是否有一种方法可以通过使用DOM详细信息中的一些数据来定位突出显示的元素，如果是，如何定位？

尝试了上面的代码，但对DOM选择的可能性不太了解。

为了使每个元素的整个突出显示成为可能，我写了以下内容：

$( document ).ready(function() {

$('div, p').each(function(i){
  $(this).addClass('sj-highlight sjhighlight'+i+'');
  $(this).attr('data-sj', 'sjhighlight'+i+'');
});

$(document).on('mouseenter mouseleave', '.sj-highlight', function (e) {

var sjhighlighter = $(this).attr("data-sj");

// hide other highlights
$('.sj-highlight').css("border","2px solid transparent");

if(e.type == 'mouseenter')

    {
    $('.'+sjhighlighter+'').css("border","2px solid #ff0000");
    }

});

最终结果将是以某种方式用DOM而不是< code>class或< code>id来定位所选元素。

Answer 1

下面是我在尝试定位没有ID或类的元素时使用的一个选项。您首先需要找出这些突出显示的元素的共同点。它可以是特定的颜色、元素层次等。然后，您可以使用filter() jquery来查找符合该规范的所有元素。这是我用过的。

/*select an element that contains this piece of code your trying to target*/
$('#Parent_container').filter(function() {
  /*here you will specify what you're trying to identify or target*/
  return $(this).find('div[class="sj-highlight"]').length >0; 
   /*optional but you can create a condition to add code or do whatever you want*/
}).find('div[class="sj-highlight"]').after('<p>some stuff</p>');

希望这有帮助。它可能会让你知道你有什么选择。

Answer 2

从我放在一起的片段中，我认为如果你可以使用

$(document).on('mouseenter mouseleave', '.sj-highlight', 
function (e) {});

这意味着您已经拥有它，因为 $（document）.on（） 表单适用于动态添加的元素（这意味着即使您动态添加元素它仍然可以正常工作），您可以使用：

var elementClass = $(this).attr('class');

您可以从那里完全控制元素。而且您也有可能超过其子项或作为 dom 元素对象返回的父项。我认为你的问题也需要澄清一下。