18

どこかにアンカー タグがある特定の DIV 構造があります。リンクをクリックするとspan、親内の別の要素の値をフェッチしdivて、何かを行う必要があります (たとえば、アラートを出すなど)。

html は次のようになります。

...
<div id="div1">
  ...
  <span>This is reqd</span>
  ...
  <a href="#">Click Me </a>
  ...
</div>
...

全体divはページ内で何度も繰り返されます。をクリックすると、a「これは必須です」という警告が表示されます。

このように HTML を検索できますか?

4

5 に答える 5

7

単一のスパン要素の場合、それは非常に簡単なはずです. リンクをクリックして myFunction(this) を呼び出すだけで、次のように DOM を操作できます。

function myFunction(currObj){
var parentofSelected = currObj.parentNode; // gives the parent DIV

var children = parentofSelected.childNodes;
for (var i=0; i < children.length; i++) {
    if (children[i].tagName = "span") {
        myValue= children[i].value;
        break;
    }
}
alert(myValue); // just to test

 } // end function

これがうまくいくことを願っています。それは私のためにやった!!

于 2013-01-23T10:58:52.740 に答える
4

はthat<span>の直接の兄弟ではないため、 or<a>を呼び出すことはできません。最善の解決策は、親を取得してクエリを実行することです。.previousSibling.previousElementSibling<span>

document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function() {
    alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
}, false);

デモ: http://jsfiddle.net/cEBnD/

于 2013-01-23T10:49:48.210 に答える
2

更新: jQuery を使用する場合と使用しない場合のソリューション

この回答では、jQuery を使用した例を示すことに対して非常に多くの反対票が投じられたため、バニラ JavaScript を使用した例をさらに追加して、誰でも jQuery を使用するかどうかを選択できるようにすることにしました。

通常、.previousSiblingバニラ JavaScript で使用できます。以下を参照してください。

.prev()jQueryで使用できます。次を参照してください。

ただし、DOM 全体の正確な構造がわからない場合、より複雑なケースでは機能しない可能性があることに注意してください。

DOM 構造が固定された単純なケースと、クラスを使用したより複雑なケースについて、jQuery とバニラ JavaScript の両方を使用してその目標を達成する例をいくつか示します。

クラスなし

最も単純な DOM 構造の場合、すべてのリンクにイベント リスナーを配置し、DOM の暗黙の知識に依存することでうまくいくかもしれませんが、これはより複雑な状況では機能しない可能性があります - それらについては、以下のクラスの例を参照してください。

jQuery の場合:

$('a').click(function () {
  alert( $(this).prev().text() );
  return false;
});

デモを参照してください。

jQuery を使用しない場合:

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.previousSibling.previousSibling.innerText);
  });
});

previousSiblingスパンとリンクの間にある空のテキスト ノードが別の方法で使用されるため、 を 2 回使用する必要があることに注意してください。

デモを参照してください。

クラスの使用

spanが要素の直前にない場合はa、コードがページ上の他のリンクを壊さないようにいくつかのクラスを追加して、少し異なる方法で行うこともできます。

jQuery の場合:

$('a.link').click(function () {
  alert( $(this).parent().find('span.text').text() );
  return false;
});

デモを参照してください。

jQuery を使用しない場合:

document.querySelectorAll('a.link').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.parentNode.querySelector('span.text').innerText);
  });
});

デモを参照してください。

上記のコードは、クラス「リンク」を持つすべての要素にクリック ハンドラーをバインドします。これは、クラス「テキスト」を持つa兄弟要素に含まれるテキストを警告します。span(もちろん、クラス名はそれよりもわかりやすいものにする必要があります。)

于 2013-01-23T10:55:21.057 に答える