获取 DIV 中的文本/URL

Get text/URL inside a DIV

本文关键字：URL 文本 DIV 获取      更新时间：2023-09-26

当用户点击它时，我正在尝试获取div的文本和URL。我将把数据传递给PHP，以便我可以创建一个显示其他信息的页面。

<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN123456</h4>
      <h4 class="model">Product 456</h4>
      <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN234567</h4>
      <h4 class="model">Product 123</h4>
      <img src="http://company.com/123.jpg" id="thumb">
</div>

我需要获取每个div的零件号，型号和图像URL(class=超人(。我已经成功地获得了零件号和型号，但是当我尝试在同一函数中抓取图像URL时，事情就崩溃了。当我可以获得图像 URL 时，我无法检索部件号和/或型号。

例如，我使用它来获取URL(我作为警报附加

(。 
$('img').click(function() {
  $(this).parent().append($(this).attr('src'));
});

我也尝试过getElementById结构，但这些结构只抓取第一个div中的信息;如果有人点击页面下方的div，它仍然只抓取第一个。我正在处理大约 5,000 个div，所以我不知道为每个div 分配一个 ID 是否有意义。我也尝试了某种(这个(结构，但我太菜鸟了，无法让事情继续下去。

我见过一些问题的答案，这些问题的答案接近我想要做的事情，但是，就像我说的，它要么是零件号和/或型号，要么是 URL，但绝不会两者兼而有之。提前感谢您的帮助。

如果您很难将部分或模型与图像相关联，则可以使用 jQuery 的 siblings() 方法检索同级元素。

然后，例如

，您可以连接这些值并显示它们。 

$('img').click(function() {
  var img = $(this);
  var partnum = img.siblings('.partnum').text();
  var model = img.siblings('.partnum').text();
  var url = img.attr('src');
  var text = 'partnum: ' + partnum + '<br>' +
    'model: ' + model + '<br>' +
    'url: ' + url + '<br>';
  img.closest('.superman').append(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN123456</h4>
  <h4 class="model">Product 456</h4>
  <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN234567</h4>
  <h4 class="model">Product 123</h4>
  <img src="http://company.com/123.jpg" id="thumb">
</div>

要使整个div 可单击，只需更改事件处理程序的选择器，并将div 用作其函数中所有选择器的上下文：

$(function() {
  $('.superman').click(function() {
    var superman = $(this);
    var partnum = $('.partnum', superman).text();
    var model = $('.model', superman).text();
    var url = $('img', superman).attr('src');
    var text = 'partnum: ' + partnum + '<br>' +
      'model: ' + model + '<br>' +
      'url: ' + url + '<br>';
    superman.append(text);
  });
});
相关文章：