web-dev-qa-db-ja.com

javascriptで近くの兄弟を取得します

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

Htmlは次のようなものです：

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

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

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

javascriptdomsiblings
16
user2003007

単一スパン要素の場合、それは非常に簡単なはずです。リンクをクリックして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

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

4
Riju Mahna

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

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

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

3
jAndy
<html>
<body>
    <div id="div1">
        <span>This is required</span>
        <a href="#" onclick="myclick(this.parentNode)">Click Me</a>
    </div>
</body>
<script>
    function myclick(x){
        var y = x.querySelector("span").innerHTML;
        alert(y)
    }
</script>
</html>

spanの代わりにclass name eggを与えることもできます。、

<span class="classname">This is required</span>
x.querySelector(".classname").innerHTML
1
George Livingston

JQueryの使用：

$('#innerId').siblings()
0
Itisha-systematix