CODEWITHSUNDEEP
javascriptjqueryhtmldom
TheDeveloper
TheDeveloper

Reputation: 1217

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>

I want to get the value of data-link when its parent href value =www.yahoo.com or www.google.com Can anyone suggest how to do it?

Upvotes: 1

Views: 1810

Answers (4)

Laura Landuyt
Laura Landuyt

Reputation: 126

$(document).ready(function() {

  $("a").on("click", function() {

      console.log($(this).children(".subData").attr("data-link"));
  });

})

then add a class atrribute to your div:

<div id="id12" data-link="goog" class="subData">

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

The IDs must be unique. Your hrefs don't start with a protocol, as per roy comment.

If you need to get directly the data link from another function you can write:

$('a[href="www.yahoo.com"] > [data-link], a[href="www.google.com"] > [data-link]')

Instead, as suggested, you can create a click event handler.

The snippet:

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

Upvotes: 1

bhansa
bhansa

Reputation: 7504

Use jquery click event and access the child's data value using .children() and .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>

Upvotes: 2

Renzo Calla
Renzo Calla

Reputation: 7696

You could use pure js using regexp to verify the links..

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>

Upvotes: 1

Related Questions