如何获取Anchor标签的子值？

Question

<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时，有人可以提出建议吗？

Answer 1

使用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> 

Answer 2

这些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> 

Answer 3

您可以使用正则表达式使用纯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> 

Answer 4

$(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">