PatrickL February 2016

Get text/URL inside a DIV

I am trying to get the text and URL of a div when a user clicks in it. I am going to pass off the data to a PHP so that I can create a page that shows some other information.

<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN123456</h4>
      <h4 class="model">Product 456</h4>
      <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN234567</h4>
      <h4 class="model">Product 123</h4>
      <img src="http://company.com/123.jpg" id="thumb">
</div>

I need to grab the part number, model, and the image URL for each div (class=superman). I have been successful at getting the part number and model, but things fall apart when I try to grab the image URL within the same function. When I can get the image URL, I am not able to retrieve the part number and/or model.

As an example, I've used this to grab the URL (I append as sort of an alert).

$('img').click(function() {
  $(this).parent().append($(this).attr('src'));
}); 

I've also tried the getElementById constructions, but those only grab the info in the very first div; if someone clicks on a div further down the page, it still only grabs the first one. I am working on about 5,000 divs, so I don't know if assigning an ID to each div makes sense. I also tried some sort of the (this) construction, but I am too much of a rookie to get things going.

I've seen some questions with answers that approach what I want to do, but, like I said, it's either the part number and/or model, or the URL, but never both. Thanks in advance for the help.

Answers


twernt February 2016

If you're having a hard time getting the partnum or model associated with an image, you can retrieve the sibling elements with jQuery's siblings() method.

Then, for example, you can concatenate the values and display them.

$('img').click(function() {
  var img = $(this);
  var partnum = img.siblings('.partnum').text();
  var model = img.siblings('.partnum').text();
  var url = img.attr('src');
  var text = 'partnum: ' + partnum + '<br>' +
    'model: ' + model + '<br>' +
    'url: ' + url + '<br>';
  img.closest('.superman').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN123456</h4>
  <h4 class="model">Product 456</h4>
  <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN234567</h4>
  <h4 class="model">Product 123</h4>
  <img src="http://company.com/123.jpg" id="thumb">
</div>

To make the entire div clickable, just change the event handler's selector and use the div as the context of all of the selectors within its function:

$(function() {
  $('.superman').click(function() {
    var superman = $(this);
    var partnum = $('.partnum', superman).text();
    var model = $('.model', superman).text();
    var url = $('img', superman).attr('src');
    var text = 'partnum: ' + partnum + '<br> 

Post Status

Asked in February 2016
Viewed 3,235 times
Voted 7
Answered 1 times

Search




Leave an answer