CODEWITHSUNDEEP
javascripthtmljquery
Banane777
Banane777

Reputation: 25

JQuery/JS select specific element

I'd like to pick a special element with jQuery. I've tried a lot of things. I'm hoping someone can help me.

$(document).ready(function() {
  open = false;
});

// Rotate the dropdown button on click
$(".category-name").click(function() {
  if (open == false) {
    $(this).find(".fa-caret-down").fadeOut("fast");
    $(this).find(".fa-caret-up").fadeIn("fast");
    $(this).prev("li").find(".category-dropdown1").slideDown("fast");
    open = true;
  } else {
    $(this).find(".fa-caret-down").fadeIn("fast");
    $(this).find(".fa-caret-up").fadeOut("fast");
    $(this).prev("li").find(".category-dropdown1").slideUp("fast");
    open = false;
  }
})
<ul class="sortable">
  <li class="category">
    <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
    <ul class="category-dropdown">
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
    </ul>
  </li>
  <li class="category">
    <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
    <ul class="category-dropdown">
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
        <li class="category-animation d-flex"><a href="#">Animation1</a></li>
    </ul>
  </li>                     
    </ul>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When I click on ".category-name", I want to select ".category-dropdown". Preferably with "(this)", so that the variability is preserved.

Upvotes: 2

Views: 49

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074286

You have at least two options:

  1. Use $(this).next(), since it's the next element, or

  2. Use $(this).parent().find(".category-dropdown") to make the code slightly more resilient in the face of changes to the HTML structure

Here's an example of #1:

$(".category-name").on("click", function() {
    $(".highlight").removeClass("highlight");
    $(this).next().addClass("highlight");
});
.highlight {
    background-color: #ffff9a;
 }
<ul class="sortable">
  <li class="category">
      <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>
  <li class="category">
      <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>                   
</ul>

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

Here's an example of #2:

$(".category-name").on("click", function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".category-dropdown").addClass("highlight");
});
.highlight {
    background-color: #ffff9a;
 }
<ul class="sortable">
  <li class="category">
      <a class="category-name d-flex">Favoriten <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>
  <li class="category">
      <a class="category-name d-flex">Tanzen <i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></a>
      <ul class="category-dropdown">
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
          <li class="category-animation d-flex"><a href="#">Animation1</a></li>
      </ul>
  </li>                   
</ul>

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

Upvotes: 5

Related Questions