如何到达 jQuery 中的 child div？

Question

我正在尝试在 jQuery 中创建一个 'show more' 按钮，但遇到了一些问题。

<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

也就是HTML。这是 jQuery:

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev(".content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});

当内容仅位于文本容器下时，它工作正常。但是如果我加一个parent div就不行了，比如：

  <div class="wrapper">
      <div class="content hideContent">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
         <p>Some more text</p>
         <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
         </ul>
      </div>
  </div>

当内容 div 现在是 jQuery 中的 child div 时，我如何访问它？提前致谢！

Answer 1

你可以用closest和find指向外容器

我也做了一些重构

像这样

$(() => {
  $('.show-more a').on('click', e => {
    e.preventDefault();
    const $this = $(e.target)
    const $content = $this.closest('.text-container').find('.content')

    $content.toggleClass("hideContent").toggleClass('showContent');

    const linkText = $content.hasClass('hideContent')? 'Show more':'Show less'
    $this.text(linkText);
  })

})

.hideContent {
 display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="wrapper">
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

Answer 2

这是你想要做的吗？使用 parentNode 向上 DOM 然后发出 querySelector 找到你想要 show/hide.

的 DIV.content

$(".show-more a").on("click", function() {
  let div=this.parentNode.parentNode.querySelector('.content');
  let classes=['showContent','hideContent'];
  
  if( div.classList.contains( classes[0] ) )div.classList.replace( classes[0],classes[1] );
  else div.classList.replace( classes[1], classes[0] );
  
  this.textContent = this.textContent=='Show more' ? 'Show less' : 'Show more';
});

.showContent{
  display:block;
}
.hideContent{
  display:none;
}

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


<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

Answer 3

您可以使用这个 ForEach 循环，它可以帮助您为同一页面上的每个 post 生成 show/hide 内容。而且您不再需要使用 jQuery。

 let showMoreBtn = document.querySelectorAll('.show-more');
showMoreBtn.forEach((eachBtn)=>{
    let textContainer =  eachBtn.parentNode;
    let contentBox = textContainer.querySelector('.content').classList;
    eachBtn.addEventListener('click',(event)=>{
        event.preventDefault();
        if(contentBox.contains('hideContent')){
            contentBox.remove('hideContent');
            contentBox.add('showContent');
            eachBtn.innerHTML = ` <a href="#">Show less</a>`;
        }else{
            contentBox.add('hideContent');
            contentBox.remove('showContent');
            eachBtn.innerHTML = ` <a href="#">Show more</a>`;
        }
    })
});

.content.hideContent{display:none;}
.content.showContent{display:block;}

<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>
<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>
<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

如何到达 jQuery 中的 child div？

How to reach to a child div in jQuery?

javascript

html

jquery