Найти текст, ближайший к элементу в HTML-контенте

Question

У меня есть HTML-контент с определенными тегами, в которых есть текст и изображения. Что делать, если я могу выбрать изображение, и я хочу, чтобы текст был ближе всего к изображению?

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

В этом случае я хочу текст, ближайший к someimage.jpg. Можно ли добиться этого с помощью PHP? или может быть jQuery?

Answer 1

При минимуме DOM обхода можно выбрать (нажмите) изображение и найти текст:

<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) ВВЕРХ .photo и ACROSS к h2:

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

Вы также можете пойти further up the DOM при необходимости. ВВЕРХ .topStory и DOWN для h2:

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

Вот документация Jquery для каждой функции продемонстрировано:

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

EDIT: на основе хорошего улова @ guest271314 и перечитывание вопроса OP, я изменил p t o h2.

Answer 2

Пользуйтесь .find(), чтобы выбрать img в пределах .topStory элемент parent; выберите родительский элемент img, который не является .topStory; выберите первый элемент, который примыкает родственный к ранее выбранному img родительского элемента, вызовите .text() на возвращенной элемент

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/