Question

我有多个div；如何在display: none内的<a>标签中隐藏或应用<div class="post-content"？我正在使用jQuery方法来处理此问题，但是我的方法无法正常工作。

<!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

使用下面的代码时，它将删除类和标记内容后div中所有内容的

。

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

如果有帮助，请尝试以下代码。只需在要更新文本并使用jquery修剪文本的位置添加span标签，然后添加按钮或链接标签即可。

<!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">
                <span>Wedding Season - frst one Paper Water Colour And Ink 17.5" x 23.5"</span>
                <a href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
            </div>
            <div class="post-content">
                <span>Wedding Seassssssssssson - Third one Water Colour And Ink On Paper 17.5" x Weddiaaasasd23.5"</span> <a
                    href="http://bibihajra.com/wedding-season/" class="more-link">Read More</a>
            </div>
            <div class="post-content">
                <span>Wedasaswqeqweqweqweqwqeqweson - Fouth one ater Colour And Ink On Paper 17.5" x 23.Weddiaaasasd"</span>
                <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>
            $(".more-link").css("display", "none");
            $('.post-content span').text(function (_, txt) {
                return $.trim(txt.split('-').pop());
            });
        </script>
    </body>

</html>

更新代码（无跨度）

<!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>
            $(".more-link").css("display", "none");
            $('.post-content span').text(function (_, txt) {
                return $.trim(txt.split('-').pop());
            });
        </script>
    </body>
</html>

Answer 2

使用此方法：

<script type="text/javascript">
	$(document).ready(function() {
		$('div.post-content a').hide();
	});
</script>

Answer 3

因此，您要在所有div中将类“ .more-link”的所有链接隐藏在类“ .post-content”的所有div中，那么您所需要做的就是：

$('.post-content .more-link').hide();

您不需要$（'。post-content'）。text（...）;代码。

如何在<div class =“ post-content”>中隐藏<a>标签？

3 个答案: