![](/img/trans.png)
[英]How to read the div child elements of anchor tag values in javascript or jquery?
[英]How to get child values of an Anchor tag?
<a href="www.yahoo.com">
<div id="id11" data-link="yah">
<div class="s1">
<div class="s2" style="color: white">abc</div>
<div class="s3" style="color: white">xyx</div>
</div>
</div>
</a>
<a href="www.google.com">
<div id="id11" data-link="goog"> <div class="s1">
<div class="s2" style="color: white">abc</div>
<div class="s3" style="color: white">xyx</div>
</div>
</div>
</a>
我想獲取數據鏈接的值,當其父href值= www.yahoo.com或www.google.com時,有人可以提出建議嗎?
使用jquery click
事件,並使用.children()
和.data()
訪問子級的data
值
$(document).ready(function() { $("a").on("click", function() { console.log($(this).children().data("link")); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="//www.yahoo.com"> <div id="id11" data-link="yah"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a> <a href="//www.google.com"> <div id="id12" data-link="goog"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a>
這些ID必須是唯一的。 根據roy的評論,您的href並非以協議開頭。
如果您需要直接從另一個函數獲取數據鏈接,可以編寫:
$('a[href="www.yahoo.com"] > [data-link], a[href="www.google.com"] > [data-link]')
相反,如建議的那樣,您可以創建一個click事件處理程序。
片段:
$('a[href="www.yahoo.com"], a[href="www.google.com"]').on('click', function(e) { if ($(this).children('div[data-link]').length != 0) { e.preventDefault(); console.log($(this).children('div[data-link]').data('link')); } }) // // ..or without events // $('a[href="www.yahoo.com"] > [data-link], a[href="www.google.com"] > [data-link]') .each((idx, ele) => console.log(ele.dataset.link))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="www.yahoo.com">111 <div id="id11" data-link="yah"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a> <a href="www.google.com">222 <div id="id12" data-link="goog"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a>
您可以使用正則表達式使用純js來驗證鏈接。
var a = document.querySelectorAll('a'); Array.prototype.forEach.call(a,function(item){ if(item.href.match(/www.yahoo.com/) || item.href.match(/www.google.com/)){ var child=item.children[0]; console.log(child.getAttribute('data-link')); } });
<a href="www.yahoo.com"> <div id="id11" data-link="yah"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a> <a href="www.google.com"> <div id="id11" data-link="goog"> <div class="s1"> <div class="s2" style="color: white">abc</div> <div class="s3" style="color: white">xyx</div> </div> </div> </a>
$(document).ready(function() {
$("a").on("click", function() {
console.log($(this).children(".subData").attr("data-link"));
});
})
然后將class atrribute添加到div中:
<div id="id12" data-link="goog" class="subData">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.