8

問題が発生し、基本的にセレクターとして使用できる変数を作成しようとしています。例えば

$('a').click(function(){
   var selector = $(this).dompath();
});

HTML：

html
    body
        div
            div /div
        /div
       ul
         li
         li
       /ul
    div
        ul
           li
           li
           li hello world
        /ul
   /div
   body
html

これは次のようなものを返します

path = html body div ul li:contains('hello world')

次に、セレクターでこれを使用してこのdivを選択できるので、

$(path).text() would return "hello world"

どうもありがとう！

4

4 に答える 4

15

おそらくこのようなもの：

function dompath( element )
{
    var path = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
        var inner = $(element).children().length == 0 ? $(element).text() : '';
        var eleSelector = element.tagName.toLowerCase() + 
           ((inner.length > 0) ? ':contains(\'' + inner + '\')' : '');
        path = ' ' + eleSelector + path;
    }
    return path;
}

:contains()これにより、別の質問のメソッドが変更され、タグに子タグがない場合にのみ、演算子を使用してタグの全文コンテンツが追加されます。

私はこの方法でテストしました：

$(document).ready(function(){
    $('#p').click(function() {
      console.log(dompath(this));
    });
});

これに対して：

<html>
    <body>
        <div>
            <div> </div>
        </div>
       <ul>
         <li></li>
         <li></li>
       </ul>
       <div>
         <ul>
           <li id="p">hi</li>
           <li></li>
           <li id="p2">hello world</li>
        </ul>
       </div>
   <body>
<html>

pをクリックした結果は、次のように出力されます。

html body div ul li：contains（'hi'）

于 2012-10-03T19:53:59.557 に答える
5

@jcernの素晴らしいコードの修正バージョン。

特徴：

  • 要素にIDがある場合：表示のみ#elementId
  • IDが存在しない場合：showelement.className
  • クラスが存在しない場合：追加されelementた状態で表示しinnerHtmlます（存在する場合）
  • <body>および要素をスキップして<html>出力を短縮します
  • jQueryに依存しません
function dompath(element) {
    var path = '',
    i, innerText, tag, selector, classes;

    for (i = 0; element && element.nodeType == 1; element = element.parentNode, i++) {
        innerText = element.childNodes.length === 0 ? element.innerHTML : '';
        tag = element.tagName.toLowerCase();
        classes = element.className;

        // Skip <html> and <body> tags
        if (tag === "html" || tag === "body")
            continue;

        if (element.id !== '') {
            // If element has an ID, use only the ID of the element
            selector = '#' + element.id;

            // To use this with jQuery, return a path once we have an ID
            // as it's no need to look for more parents afterwards.
            //return selector + ' ' + path;
        } else if (classes.length > 0) {
            // If element has classes, use the element tag with the class names appended
            selector = tag + '.' + classes.replace(/ /g , ".");
        } else {
            // If element has neither, print tag with containing text appended (if any)
            selector = tag + ((innerText.length > 0) ? ":contains('" + innerText + "')" : "");
        }

        path = ' ' + selector + path;
    }
    return path;
}
于 2014-02-27T15:02:56.347 に答える
0

クエリを作成する要素のすべての親を列挙し、各親のセレクターを追加する必要があります。たとえば、親のノード名や、その親にテストが必要な場合は、contains-testの名前などです。これにcontains-testが必要な場合に確認する唯一の方法は、各ステップで現在の親に対して現在のクエリを適用し、クエリがターゲット要素のみを返すかどうかを確認することです。次に、一致するものが多すぎる場合は、contains-testを追加します...

私はそれを行うGreasemonkeyスクリプトを書きました。まず、別のツリー（「テンプレート」）でターゲット要素を見つけるために必要なすべての要素を収集し、それをクエリに変換します。ただし、ほとんどの場合、テキストは構造よりも頻繁に変更されると思うので、照合にはテキストの代わりに属性（具体的にはclass / id / name）を使用し、属性が十分に一意でない場合は位置を使用します。

于 2012-10-03T20:02:04.410 に答える
0

はるかに良い方法があるので、リクエストはちょっとばかげています。

後ですぐに参照できるように要素に一意のIDを割り当てるか、IDがすでに割り当てられている場合はそれを使用します。

//
// generate a unique (enough) id for an element if necessary
//
function getUID(id) {
    if(window["uidCounter"]==null)
        window["uidCounter"]=0;
    return id||( (window["uidCounter"]++) + "_" + (new Date()).getTime() );
}
//
// use an #ID selector
//
$('a').click(function(){
   var uid = getUID( $(this).attr('id') );
   $(this).attr('id', uid);
   var selector = "#" + uid;
});
于 2012-10-10T18:25:04.383 に答える