在 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) UP to .photo 和 ACROSS to 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 下至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 的良好发现和对OP 问题的重新阅读，我已将p 更改为h2。

Answer 2

尝试使用.find() 在.topStory 父元素中选择img；选择不是 .topStory 的 img 元素的父级；选择与先前选择的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/