我们都知道有许多不同的选择器组合可以用来创建一组独特的jQuery元素.
是否存在允许用户在视觉上点击DOM的任何部分(类似于Firebug的检查功能)并自动建议与该元素匹配的相关潜在选择器的工具(插件,扩展等)？
该工具将具有jQuery选择器的内部知识(CSS选择器不足)并且将考虑DOM的周围元素以提供10-20个有用的选择器建议.
解决方法
以下是您需要(我希望)或只是理解的内容的起点：
$("body").click(function(event) { // if you are not interested on 'body' himself use: $("body>*")
// QUESTIONS:
var Q_qwer = 'Not a parent';
var Q_children = 'Not a children';
var Q_last = 'Not last';
var Q_first = 'Not first';
//#
if ($(event.target).children().size() > 0) {
myChildren = $(event.target).children();
var Q_parent = myChildren[0].nodeName + ' (ID: ' + myChildren[0].id + ' || CLASS: ' + myChildren[0].className + ' )';
}
if ($(event.target).parent().size() > 0) {
myParent = $(event.target).parent();
var Q_children = myParent[0].nodeName + ' (ID: ' + myParent[0].id + ' || CLASS: ' + myParent[0].className + ' )';
}
if ($(event.target).is(':last-child')) {
Q_last = 'LAST!' ;
}
if ($(event.target).is(':first-child')) { // or use: $(event.target).index() == 0
Q_first = 'FIRST!' ;
}
$("#log").html(' event.target: ' + event.target +
' <br> nodeName: ' + event.target.nodeName +
',Tag: ' + event.target.tagName +
' <br> ID: ' + event.target.id +
' <br> Class: ' + event.target.className +
' <br> Href: ' + event.target.href +
' <br> Value: ' + event.target.value +
' <br> Children of: ' + Q_children +
' <br> Parent of: ' + Q_parent + ' (First children)' +
' <br> Last children?: ' + Q_last +
' <br> First children?: ' + Q_first +
' <br> .index( ' + $(event.target).index() + ')' +
' <br> .eq( ' + $(event.target).prevAll().length + ')' +
' <br> <hr>' + $(event.target).html()
);
});
希望这可以帮助！
