Find the text nearest to an element in HTML content

Question

I have an HTML content with specific tags which have text and images in it. What if I am able to select an image and I want the the text nearest to an image?

<div class="topStory">
    <div class="photo">
    <a href="somelink"><img src="someimage.jpg" border="0" alt="Photo"></a>
    </div>
    <h2><a href="somelink">Text near to someimage.jpg</a></h2>
    <p>Some extra text.</p>
</div>

In this case I want the text nearest to someimage.jpg. Is it possible to achieve this using PHP? or may be jQuery?

have you used [search](http://stackoverflow.com/a/3660077/5397119) before asking ? — Sergio Ivanuzzo, Dec 14 '15 at 15:06
@JayBlanchard I was called out about giving the OP the wrong information and included 2 links about `.closet()` what am I not grasping? I guess probably I didn't include `.find()`? — Funk Forty Niner, Dec 14 '15 at 15:09
`.closest()` looks for an ancestor or parent. To get from the image to its related text requires going up (closest) and then down(find) as the image and text are not siblings of each other. — Jay Blanchard, Dec 14 '15 at 15:16
@JayBlanchard I think this will be more generic if it was $('img').closest('div').find('p').text();. Please correct me if I am wrong. — SanketR, Dec 14 '15 at 15:17
It would be more generic, but it is wrong as the closest div, `.photo` is a *sibling* of the paragraph. — Jay Blanchard, Dec 14 '15 at 15:19
There's no magic pill, you have to know your HTML and traverse accordingly. — adeneo, Dec 14 '15 at 15:20
Just a thought. Is it possible using PHP to strip all tags except image tags and text content? — SanketR, Dec 14 '15 at 15:23
...yes. `strip_tags()` http://php.net/manual/en/function.strip-tags.php takes arguments/exclusions. — Funk Forty Niner, Dec 14 '15 at 15:25
@Fred-ii- I'm really sorry, I was inattentive. Next time I will more attentive. — Sergio Ivanuzzo, Dec 14 '15 at 15:25

Jay Blanchard · Accepted Answer · 2015-12-14T16:14:13.940

With a minimum of DOM traversal you can select (click on) the image and find the text:

<div class="topStory">
    <div class="photo">
    <a href="somelink"><img src="http://placehold.it/350x150" border="0" alt="Photo"></a>
    </div>
    <h2><a href="somelink">Text near to someimage.jpg</a></h2>
    <p>Some extra text.</p>
</div>

jQuery (get the sibling paragraph) UP to .photo and ACROSS to h2:

$(document).on('click', 'img', function(e){
    e.preventDefault();
    var associatedText = $(this).closest('.photo').siblings('h2').text();
  console.log(associatedText);
});

You can also go further up the DOM if need be. UP to .topStory and DOWN to h2:

$(document).on('click', 'img', function(e){
    e.preventDefault();
    var associatedText = $(this).closest('.topStory').find('h2').text();
  console.log(associatedText);
});

Here is the jQuery documentation for each function demonstrated:

.closest()
.siblings()
.find()

EDIT: Based on a good catch by @guest271314 and a re-reading of the OP's question, I have changed p to h2.

_"In this case I want the text nearest to someimage.jpg. "_ Should `.find('p')` be `.find('h2')` ? — guest271314, Dec 14 '15 at 16:01
Yes - you would do that if that is the text you're looking for @guest271314 — Jay Blanchard, Dec 14 '15 at 16:11

guest271314 · Answer 2 · 2015-12-14T15:52:33.953

0

Try using .find() to select img within .topStory parent element ; select parent of img element which is not .topStory ; select first element that is adjacent sibling to previously selected img parent element , call .text() on returned element

var topStory = $(".topStory");
var img = topStory.find("img");
// here `img.parents().not(topStory)` is `context`
var text = $("~ *:first", img.parents().not(topStory)).text();
console.log(img, text)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topStory">
    <div class="photo">
    <a href="somelink"><img src="someimage.jpg" border="0" alt="Photo"></a>
    </div>
    <h2><a href="somelink">Text near to someimage.jpg</a></h2>
    <p>Some extra text.</p>
</div>

jsfiddle http://jsfiddle.net/3cvh5rk5/

edited Dec 14 '15 at 15:52

answered Dec 14 '15 at 15:33

guest271314

1
15
104
177

2

Why should the OP try this? A ***good answer*** will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO. – Jay Blanchard Dec 14 '15 at 15:33
1

@JayBlanchard See updated post. stacksnippets went down as was composing, will create a jsfiddle – guest271314 Dec 14 '15 at 15:37
@JayBlanchard Substituted `topStory` for `top` to not conflict with `window.top` . Is explanation provided for approach adequate ? – guest271314 Dec 14 '15 at 15:43
that looks much better. – Jay Blanchard Dec 14 '15 at 15:48

Find the text nearest to an element in HTML content

2 Answers2