在 HTML 内容中查找最接近元素的文本

Question

我有一个 HTML 内容，其中包含特定标签，其中包含文本和图像。如果我能够 select 一张图片并且我想要最接近图片的文本怎么办？

<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

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

Answer 2

通过最少 DOM 次遍历，您可以 select（单击）图像并找到文本：

<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 和交叉到 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。

在 HTML 内容中查找最接近元素的文本

Find the text nearest to an element in HTML content

php

jquery

html-content-extraction