$("*").click(function(){
$(this); // how can I get selector from $(this) ?
});
からセレクター$(this)を取得する簡単な方法はありますか? セレクターで要素を選択する方法はありますが、要素からセレクターを取得するにはどうすればよいでしょうか?
108433 次
19 に答える
35
::警告::
.selector はバージョン 1.7 で非推奨になり、1.9 で削除されました
jQuery オブジェクトには、昨日コードを掘り下げたときに見たセレクター プロパティがあります。ドキュメントで定義されているかどうかはわかりませんが、それがどれほど信頼できるかです（将来の証明のため）。しかし、それはうまくいきます！
$('*').selector // returns *
編集: イベント内でセレクターを見つける場合、要素にはさまざまなセレクターを介して複数のクリック イベントが割り当てられる可能性があるため、その情報は要素ではなくイベント自体の一部であることが理想的です。bind()解決策は、直接追加するのではなく、ラッパーを使用して aroundclick()などにイベントを追加することです。
jQuery.fn.addEvent = function(type, handler) {
this.bind(type, {'selector': this.selector}, handler);
};
セレクターは、 という名前のオブジェクトのプロパティとして渡されていますselector。としてアクセスしevent.data.selectorます。
いくつかのマークアップで試してみましょう ( http://jsfiddle.net/DFh7z/ ):
<p class='info'>some text and <a>a link</a></p>
$('p a').addEvent('click', function(event) {
alert(event.data.selector); // p a
});
免責事項:live()イベントと同様に、DOM トラバーサル メソッドが使用されている場合、セレクター プロパティが無効になる可能性があることに注意してください。
<div><a>a link</a></div>
以下のコードは、この場合は無効なセレクターliveであるセレクター プロパティに依存しているため、機能しません。a.parent()
$('a').parent().live(function() { alert('something'); });
メソッドは実行されますaddEventが、間違ったセレクターが表示されますa.parent()。
于 2010-03-10T22:36:20.470 に答える
22
@drzaus と協力して、次の jQuery プラグインを作成しました。
jQuery.getSelector
!(function ($, undefined) {
/// adapted http://jsfiddle.net/drzaus/Hgjfh/5/
var get_selector = function (element) {
var pieces = [];
for (; element && element.tagName !== undefined; element = element.parentNode) {
if (element.className) {
var classes = element.className.split(' ');
for (var i in classes) {
if (classes.hasOwnProperty(i) && classes[i]) {
pieces.unshift(classes[i]);
pieces.unshift('.');
}
}
}
if (element.id && !/\s/.test(element.id)) {
pieces.unshift(element.id);
pieces.unshift('#');
}
pieces.unshift(element.tagName);
pieces.unshift(' > ');
}
return pieces.slice(1).join('');
};
$.fn.getSelector = function (only_one) {
if (true === only_one) {
return get_selector(this[0]);
} else {
return $.map(this, function (el) {
return get_selector(el);
});
}
};
})(window.jQuery);
縮小された Javascript
// http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object/15623322#15623322
!function(e,t){var n=function(e){var n=[];for(;e&&e.tagName!==t;e=e.parentNode){if(e.className){var r=e.className.split(" ");for(var i in r){if(r.hasOwnProperty(i)&&r[i]){n.unshift(r[i]);n.unshift(".")}}}if(e.id&&!/\s/.test(e.id)){n.unshift(e.id);n.unshift("#")}n.unshift(e.tagName);n.unshift(" > ")}return n.slice(1).join("")};e.fn.getSelector=function(t){if(true===t){return n(this[0])}else{return e.map(this,function(e){return n(e)})}}}(window.jQuery)
使い方と落とし穴
<html>
<head>...</head>
<body>
<div id="sidebar">
<ul>
<li>
<a href="/" id="home">Home</a>
</li>
</ul>
</div>
<div id="main">
<h1 id="title">Welcome</h1>
</div>
<script type="text/javascript">
// Simple use case
$('#main').getSelector(); // => 'HTML > BODY > DIV#main'
// If there are multiple matches then an array will be returned
$('body > div').getSelector(); // => ['HTML > BODY > DIV#main', 'HTML > BODY > DIV#sidebar']
// Passing true to the method will cause it to return the selector for the first match
$('body > div').getSelector(true); // => 'HTML > BODY > DIV#main'
</script>
</body>
</html>
QUnitテストでフィドル
于 2013-03-25T19:42:43.660 に答える
5
これを試しましたか？
$("*").click(function(){
$(this).attr("id");
});
于 2012-12-04T11:11:25.903 に答える
2
jQuery プラグインをリリースしました: jQuery Selectorator、このようなセレクターを取得できます。
$("*").on("click", function(){
alert($(this).getSelector().join("\n"));
return false;
});
于 2013-08-10T02:25:50.967 に答える
1
上記の解決策の後でも複数の要素を取得していたので、dom 要素をさらに特定するために dds1024 の作業を拡張しました。
例: DIV:nth-child(1) DIV:nth-child(3) DIV:nth-child(1) ARTICLE:nth-child(1) DIV:nth-child(1) DIV:nth-child(8) DIV :nth-child(2) DIV:nth-child(1) DIV:nth-child(2) DIV:nth-child(1) H4:nth-child(2)
コード：
function getSelector(el)
{
var $el = jQuery(el);
var selector = $el.parents(":not(html,body)")
.map(function() {
var i = jQuery(this).index();
i_str = '';
if (typeof i != 'undefined')
{
i = i + 1;
i_str += ":nth-child(" + i + ")";
}
return this.tagName + i_str;
})
.get().reverse().join(" ");
if (selector) {
selector += " "+ $el[0].nodeName;
}
var index = $el.index();
if (typeof index != 'undefined') {
index = index + 1;
selector += ":nth-child(" + index + ")";
}
return selector;
}
于 2015-12-28T01:57:42.303 に答える
1
@jessegavin の修正にいくつかの修正を加えました。
要素に ID がある場合、これはすぐに返されます。また、要素に ID、クラス、または名前がない場合に備えて、name 属性チェックと nth-child セレクターを追加しました。
ページに複数のフォームがあり、同様の入力がある場合は、名前のスコープが必要になる場合がありますが、まだ処理していません。
function getSelector(el){
var $el = $(el);
var id = $el.attr("id");
if (id) { //"should" only be one of these if theres an ID
return "#"+ id;
}
var selector = $el.parents()
.map(function() { return this.tagName; })
.get().reverse().join(" ");
if (selector) {
selector += " "+ $el[0].nodeName;
}
var classNames = $el.attr("class");
if (classNames) {
selector += "." + $.trim(classNames).replace(/\s/gi, ".");
}
var name = $el.attr('name');
if (name) {
selector += "[name='" + name + "']";
}
if (!name){
var index = $el.index();
if (index) {
index = index + 1;
selector += ":nth-child(" + index + ")";
}
}
return selector;
}
于 2012-12-30T18:35:16.233 に答える
1
http://www.selectorgadget.com/は、このユース ケース用に明示的に設計されたブックマークレットです。
そうは言っても、CSS セレクターを自分で学習する必要があるという点で、他のほとんどの人に同意します。コードでそれらを生成しようとすることは持続可能ではありません。:)
于 2011-10-12T01:19:39.233 に答える
0
クリックされた現在のタグの名前を取得しようとしていますか?
もしそうなら、これをしてください..
$("*").click(function(){
alert($(this)[0].nodeName);
});
「セレクター」を実際に取得することはできません。あなたの場合の「セレクター」は*.
于 2010-03-10T22:08:29.343 に答える
0
必要に応じて、必要な場合に備えて、同じJavascriptコード。これは、上記で選択した回答の翻訳のみです。
<script type="text/javascript">
function getAllParents(element){
var a = element;
var els = [];
while (a && a.nodeName != "#document") {
els.unshift(a.nodeName);
a = a.parentNode;
}
return els.join(" ");
}
function getJquerySelector(element){
var selector = getAllParents(element);
/* if(selector){
selector += " " + element.nodeName;
} */
var id = element.getAttribute("id");
if(id){
selector += "#" + id;
}
var classNames = element.getAttribute("class");
if(classNames){
selector += "." + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, ".");
}
console.log(selector);
alert(selector);
return selector;
}
</script>
于 2013-05-05T06:11:03.147 に答える
0
p1noxさん、ありがとうございます！
私の問題は、フォームの一部を変更していた ajax 呼び出しにフォーカスを戻すことでした。
$.ajax({ url : "ajax_invite_load.php",
async : true,
type : 'POST',
data : ...
dataType : 'html',
success : function(html, statut) {
var focus = $(document.activeElement).getSelector();
$td_left.html(html);
$(focus).focus();
}
});
関数を jQuery プラグインにカプセル化する必要がありました。
!(function ($, undefined) {
$.fn.getSelector = function () {
if (!this || !this.length) {
return ;
}
function _getChildSelector(index) {
if (typeof index === 'undefined') {
return '';
}
index = index + 1;
return ':nth-child(' + index + ')';
}
function _getIdAndClassNames($el) {
var selector = '';
// attach id if exists
var elId = $el.attr('id');
if(elId){
selector += '#' + elId;
}
// attach class names if exists
var classNames = $el.attr('class');
if(classNames){
selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
}
return selector;
}
// get all parents siblings index and element's tag name,
// except html and body elements
var selector = this.parents(':not(html,body)')
.map(function() {
var parentIndex = $(this).index();
return this.tagName + _getChildSelector(parentIndex);
})
.get()
.reverse()
.join(' ');
if (selector) {
// get node name from the element itself
selector += ' ' + this[0].nodeName +
// get child selector from element ifself
_getChildSelector(this.index());
}
selector += _getIdAndClassNames(this);
return selector;
}
})(window.jQuery);
于 2019-05-29T14:45:51.603 に答える
-1
これは DOM パスを表示しませんが、オブジェクトを表示するときに、たとえば chrome デバッガーで表示される内容の文字列表現を出力します。
$('.mybtn').click( function(event){
console.log("%s", this); // output: "button.mybtn"
});
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
于 2016-04-11T13:17:48.247 に答える
-4
どうですか：
var selector = "*"
$(selector).click(function() {
alert(selector);
});
jQueryが使用されたセレクターテキストを保存するとは思いません。結局のところ、次のようなことをした場合、それはどのように機能するでしょうか。
$("div").find("a").click(function() {
// what would expect the 'selector' to be here?
});
于 2010-03-10T22:08:43.433 に答える