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

Question

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

У меня есть 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?

0

html-content-extraction jquery php

Решение

Другие решения

Попробуйте использовать .find() выбирать img в .topStory родительский элемент; выберите родителя 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/

0

Источник

Accepted Answer

С минимальным обходом 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 (получить пункт брата) Вплоть до .photo и по h2:

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

Вы также можете пойти дальше вверх по DOM если нужно. Вплоть до .topStory и вниз h2:

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

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

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

РЕДАКТИРОВАТЬ: Из-за хорошей уловки @ guest271314 и перечитывания вопроса ОП я изменился p в h2,

3