使用jQuery

Question

我的HTML页面底部出现了一些搜索结果，我想抓住这些结果中出现的每个li元素的一些内容：

<ul id="hits">

  <li class="hit">
    <a href="#" class="image" style="background-image: url('http://...')"></a>
    <div class="anotherclass">
      <h5 class="title"> Here is a title </h5>
      <p> Here is some paragraph text </p>
    </div>
  </li>

  <li>...</li>

</ul>

我需要每个li中的这两个元素（按此顺序）：

1. h5标记内的文字（即“这是标题”），
2. 并且在锚a标记内显示为属性的图像路径（即，background-image: url()）

到目前为止，这是我的解决方案，但没有运气：

$(".hit").each(function() {
  let title = $(this).find("title").innerHTML;
  let img = $(this).find("image").attr("style");
}); 

我也不确定如何获取style属性中的URL，但也许这是另一个SO问题。

Answer 1

你的解决方案足够接近。由于title和image是类，因此您需要添加.。其次，要获得h5，您应该使用text()代替innerHTML：

＆＃13;

＆＃13;

$(".hit").each(function() {
  let title = $(this).find(".title").text();
  let img = $(this).find(".image").attr("style");
  console.log(title)
  console.log(img)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hits">

  <li class="hit">
    <a href="#" class="image" style="background-image: url('http://...')"></a>
    <div class="anotherclass">
      <h5 class="title"> Here is a title </h5>
      <p> Here is some paragraph text </p>
    </div>
  </li>


</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先您缺少.，.find(".title")，.find(".image")

第二个是从h5使用.text()而非innerHTML

获取文字

<强>演示

＆＃13;

＆＃13;

$(".hit").each(function() {
  let title = $(this).find(".title").text();
  console.log(title)
  let img = $(this).find(".image").attr("style");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hits">

  <li class="hit">
    <a href="#" class="image" style="background-image: url('http://...')"></a>
    <div class="anotherclass">
      <h5 class="title"> Here is a title </h5>
      <p> Here is some paragraph text </p>
    </div>
  </li>

  <li>...</li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(".hit").each(function() {
  let title = $(this).find(".title").text();
  let img = $(this).find(".image").css('background-image');
}); 

我认为你的意思是使用课程。