他のリンクにアタッチされたクラスに対応するIDを持つリンクがたくさんあります。リンクIDを変数として渡し、その変数を使用して、JavaScriptを使用してクラスごとに他のリンクを検索しています。コード例は次のとおりです。
var elements = document.getElementsByClassName(id);
for(var i=0; i<elements.length; i++){}
これまでのところ、これらの関連リンクに対してやりたいことは何でもできます。ただし、ここで、これらのリンクが存在するdivのIDを取得したいと思います。JQueryを使用せずにJavaScriptを使用してリンクのdivIDを見つける方法はありますか？
質問する前に、JQueryを使用してみませんか？私はこれが初めてで、JQueryをまだ学習していません。さらに、何か他のことを学ぶ前に、JavaScriptで物事を行う方法を理解したいと思います。
親要素IDにアクセスするには、次を使用できます。
var elementId = elements[i].parentNode.id;
詳細については、こちらを参照してください：要素の親divを取得する
最も近いDIV親を見つけるには、次のようなことができるはずです。
var elements = document.getElementsByClassName(id);
for(var i=0; i<elements.length; i++){
var parent = elements[i].parentNode;
while (parent.localName != null && parent.localName.toLowerCase() != "div") {
parent = parent.parentNode;
}
if (parent != null && parent.id != null) {
var parentId = parent.id;
alert(parentId);
}
}
編集：クラスがどのDIVにも含まれていない場合に備えて、nullチェックを追加しました。
これが私が使用したテストです：
<html>
<body>
<div id="asdf">
<a href="#" class="blah">1</a>
<a href="#" class="blah">2</a>
</div>
<div id="asdf2">
<span>
<a href="#" class="blah">3</a>
<a href="#" class="blah">4</a>
</span>
</div>
<!-- These two won't cause an alert since no DIV surrounds them -->
<a href="#" class="blah">5</a>
<a href="#" class="blah">6</a>
<div id="asdf3">
<span>
<a href="#" class="blah">7</a>
<a href="#" class="blah">8</a>
</span>
</div>
<input type="button" onclick="run();return false;" value="Run" />
<script>
// This will cause 6 alerts: asdf, asdf, asdf2, asdf2, asdf3, asdf3
function run() {
var elements = document.getElementsByClassName("blah");
for(var i=0; i<elements.length; i++){
var parent = elements[i].parentNode;
while (parent.localName != null && parent.localName.toLowerCase() != "div") {
parent = parent.parentNode;
}
if (parent != null && parent.id != null) {
var parentId = parent.id;
alert(parentId);
}
}
}
</script>
</body>
</html>
element.parentNode.id親要素のid属性を取得するために使用できます。