Question

我如何显示：从父div类名称“ post-content”中获取“更多”信息，出现问题，我无法在帮助下通过<a>标记类删除“更多信息” jQuery的，我该如何解决这个问题？ Output of this code

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div class="post-content">
      Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>

  </body>

  </html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <script>
    $('.post-content').text(function(_, txt) {
      return $.trim(txt.split('-').pop());
    });
    $(".more-link").css("display", "none");
  </script>
</body>

</html>

Answer 1

这样的事情应该删除给定类名的所有元素：

let links = document.querySelectorAll(".more-link");
for (link of links) {
  link.remove();
}

<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>
<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>
<div class="post-content">
  Wedding Season - frst one Paper <a href="" class="more-link">Read More</a>
</div>

Answer 2

您可以简单地使用document.querySelectorAll来获取属于a类div后代的所有post-content元素。

接下来，通过调用NodeList并传递querySelectorAll作为参数，将Array返回的Array.from转换为NodeList。

最后，使用Array.protoype.forEach遍历元素并将display属性设置为none

Array.from(document.querySelectorAll('.post-content a')).forEach(anchorEl => anchorEl.style.display = 'none');

<body>
  <div class="post-content">
    Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>
  <div class="post-content">
    Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>
  <div class="post-content">
    Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
  </div>

Answer 3

此行：

$('.post-content').text(function(_, txt) {
  return $.trim(txt.split('-').pop());
});

将div中的html替换为文本。现在，“阅读更多”不再是链接，而只是文字。因此，当您尝试隐藏链接时，单词不再用标签包裹。

Answer 4

您可以尝试这样。并请删除多个正文和html close标签。 -

$(".more-link").remove();
$('.post-content').text(function(_, txt) {
  return $.trim(txt.split('-').pop());
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <!DOCTYPE html>
  <html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div class="post-content">
      Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>
    <div class="post-content">
      Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd" <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
    </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
  <script>
    
  </script>
</body>

</html>

Answer 5

如果删除该内容，则.post-content上的初始方法有错误：

$（'。post-content a'）。hide（）;有效，这就是我在这种情况下要使用的功能。

第一个功能到底要实现什么？为什么在身体中有身体？那也可能引起问题。

如何使用jquery删除“阅读更多”？

5 个答案: