Updating all the direct components within the corresponding category with jQuery

Question

Updating all the direct components within the corresponding category with jQuery

Here is the HTML content I am working with:

 <li class="info"> info<li>
 <li class="other"> info<li>
 <li class="other"> info<li>

 <li class="Error"> error<li>
 <li class="other"> error<li>
 <li class="warning"> warning<li>
 <li class="other"> warning<li>
 <li class="other"> warning<li>
 <li class="info"> info<li>
 <li class="other"> info<li>
 <li class="other"> info<li>

To filter only the immediate li.other elements based on the li element class, I tried using jQuery.

My initial approach was to select .info elements and then target previous siblings with class .other:

  $('.info').prevAll('li.other').css({});

However, this changed all the previous li.other elements. Instead, I want to change only the specific li.other element that comes immediately before the selected .info element and ignore the rest.

If anyone has a suggestion for achieving this, please provide your input. Thank you!

javascript jquery html css

Answer 1

Answer №1

To achieve the desired outcome, utilize the prevUntil() method in conjunction with the :not() pseudo-class selector.

$('.info').prevUntil(':not(li.other)').css({});

$('.info').prevUntil(':not(li.other)').css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>

To retrieve only the three instances of warning, include the last element in the selector using the addBack() method.

$('.info').prevUntil(':not(li.other)').prev().addBack().css({});

$('.info').prevUntil(':not(li.other)').prev().addBack().css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>

Answer 2

To achieve the desired outcome, utilize the prevUntil() method in conjunction with the :not() pseudo-class selector.

$('.info').prevUntil(':not(li.other)').css({});

$('.info').prevUntil(':not(li.other)').css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>

To retrieve only the three instances of warning, include the last element in the selector using the addBack() method.

$('.info').prevUntil(':not(li.other)').prev().addBack().css({});

$('.info').prevUntil(':not(li.other)').prev().addBack().css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>

Answer 3

Answer №2

One solution is to utilize the following code snippet

 $('.other').next().css({});

Answer 4

One solution is to utilize the following code snippet

 $('.other').next().css({});

Answer 5

Answer №3

Give this a shot:

    $("information + additional").css({});

Answer 6

Give this a shot:

    $("information + additional").css({});

Updating all the direct components within the corresponding category with jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Returning a 404 Error stating "Invalid request to /api/users/register."

Utilizing Angular for Webcam Integration

Unable to modify array state with data from another state

Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

Resolve the route expression before the API request is fully processed

Switch between selection modes in React JS DataGrid using Material UI with the click of a button

No definition found for state

What is the best way to display a <div> depending on the screen size in React JS using a global variable, without utilizing state management?

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

Binding values in Vue.js with a prefix and suffixCreating bindings in Vue

I encountered an issue while attempting to install dependencies listed in the package.json file using the npm install command

When using BeautifulSoup, there may be instances where the table element is not always detected, resulting in a 'NoneType' error being returned on occasion

Simultaneous AJAX, animated page loader

JS/Apps Script: Passing object and its keys as function parameters

Is there a way to asynchronously load image src URLs in Vue.js?

The "variable" used in the React app is not defined, resulting in a no

Is there a way to display a secondary header once the page is scrolled down 60 pixels?

Retrieve JSON data by making a POST request to a website's API

Dealing with Class and Instance Problems in Mocha / Sinon Unit Testing for JavaScript

Using an icon font as a background in CSS attribute