2

クリックした要素へのdomパスを返す単純なjs関数があります。ただし、一部の要素 (通常はクリックした要素) が 2 回カウントされることがあります

したがって、次のコードがある場合

<ul>
<li><a href ='#'>Some link</a></li>
</ul>

出力は次のようul:nth-child(1) > li:nth-child(1) > a:nth-child(2) になりaますが、1人の子である必要があります。

ここに関数のコードがあります

var getDomPath;

getDomPath = function(el) {
  var count, element, nth, path, selector, sib;
  element = el;
  if (!(el instanceof Element)) {
    return;
  }
  path = [];
  while (el.nodeType === Node.ELEMENT_NODE && el.id !== "jobs") {
    selector = el.nodeName.toLowerCase();
    if (el.id) {
      selector += "#" + el.id;
    } else if (el.className) {
      selector += "." + el.className;
    } else {
      sib = el;
      nth = 1;
      count = 1;
      while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && $(el).prev().prop('tagName') !== "STYLE" && $(el).prev().prop('tagName') !== null) {

        count += $(el).prevAll().size();
      }
      selector += ":nth-child(" + count + ")";
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(" > ");
};

コードはコーヒーから JavaScript に変換されたので、少し見栄えが悪いかもしれません

ここにパスを取得しようとしているhtmlがあります

<td width="50%"><strong>Leveringssadresse</strong>
<br>
Hans Andersen
<br>
Andevej 123
<br>
1234 Andeby
<br>
Denmark
<br>
Telefon: 31122345
<br>
Mobiltelefon: 12232345
<br>
<a href="mailto:mail@gmail.com">mail@gmail.com</a>
<br>
</td>

ここでa要素をクリックすると、それが であると予想されますがnth-child(8)、どういうわけか、17 (コードで 1 ずつインクリメントされると 16 + 1) になります。

4

2 に答える 2

1

問題は次の行にあります。

while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && $(el).prev().prop('tagName') !== "STYLE" && $(el).prev().prop('tagName') !== null) {

この行を何度も読みましたが、あなたが何をしようとしているのかわかりません。

あなたのコードは言う:

  • 現在調べているノードが要素であることを確認してください
  • 現在調べているノードを前の兄弟に設定する
  • 元のノードの前の要素に、そうでないタグ名があることを確認してくださいSTYLE

その一連のステップが意図されていることはわかりませんが、最終条件が満たされると、 が計算されますn * (x + 1) + 1。ここnで、 は先行する要素の兄弟xの数であり、 はテキスト ノードを介在させない直前の要素の兄弟の数です。

次の行は次のとおりです。

count += $(el).prevAll().size();

確かに、これは一度だけ実行する必要があり、条件はまったく必要ありません。

count = $(el).prevAll().length + 1;

jsFiddleと作業コード。

于 2013-11-05T13:03:05.197 に答える