Question 11237 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I hide an li containing text that starts with a dash – Jquery

I am using the Chosen library. I have a long hierarchy select drop down list of parent and child items. It is automatically populated. I want to hide all li’s containing text that starts with a dash character, example -General Discussion. I would also like to scope the hiding to only inside of the ul class name chosen-results.

<ul class="chosen-results">
  //Below is the li of a child (I want to hide this li)
  <li class="active-result" data-option-array-index="4">-General 
  Discussion</li>
  //Below is the li of a parent ( I want to leave this alone)
  <li class="active-result" data-option-array-index="0">Accident Prevention 
  </li>
</ul>

Updated. This works on node preview mode, but not in node edit mode

(function ($) {
  $(document).ready(function () {
    $("ul.chosen-results li").each(function () {
      if ($(this).text().charAt(0) === '-') {
        $(this).hide();
      }
    });
  });
})(jQuery);

Below I tried to use .ajaxComplete, but it does not work.

(function ($) {
  $(document).ajaxComplete(function() {
    $("ul.chosen-results li").each(function () {
      if ($(this).text().charAt(0) === '-') {
        $(this).hide();
      }
    });
  });
})(jQuery);
Tags:

2

Answers


  1. 0

    You can use JavaScript/jQuery to hide the li elements with the text starting with a dash character. Here is a sample code:

    $(document).ready(function() {
  $("ul.chosen-results li").each(function() {
    if ($(this).text().charAt(0) === '-') {
      $(this).hide();
    }
  });
});

    This code will run when the document is ready and select all li elements inside the ul with the class chosen-results. It will then loop through each li element and check if the first character of its text is a dash. If it is, the li element will be hidden.

    Login or Signup to reply.
  2. 0

    You don’t need jQuery.

    Using RegExp.prototype.test()

    document.querySelectorAll(".chosen-results li").forEach((li) => {
  li.classList.toggle("u-hidden", /^-/.test(li.textContent.trim()));
});
    /* Utility classes */
.u-hidden { display: none; }
    <ul class="chosen-results">
  <li class="active-result" data-option-array-index="4">
    -General Discussion
  </li>
  <li class="active-result" data-option-array-index="0">
    Accident Prevention
  </li>
</ul>

    Using String.prototype.startsWith()

    document.querySelectorAll(".chosen-results li").forEach((li) => {
  li.classList.toggle("u-hidden", li.textContent.trim().startsWith("-"));
});
    /* Utility classes */
.u-hidden { display: none; }
    <ul class="chosen-results">
  <li class="active-result" data-option-array-index="4">
    -General Discussion
  </li>
  <li class="active-result" data-option-array-index="0">
    Accident Prevention
  </li>
</ul>

    Using String index [i]

    document.querySelectorAll(".chosen-results li").forEach((li) => {
  li.classList.toggle("u-hidden", li.textContent.trim()[0] === "-");
});
    /* Utility classes */
.u-hidden { display: none; }
    <ul class="chosen-results">
  <li class="active-result" data-option-array-index="4">
    -General Discussion
  </li>
  <li class="active-result" data-option-array-index="0">
    Accident Prevention
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search