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

The Daterangepicker function moment() outputs numerical values

I'm encountering an issue where the this.props object is undefined even though I've passed actions to mapDispatchToProps. What could

Uploading and saving data to an object in FaunaDB using React hook forms

Retrieving information from Firebase after updating it

Ways to protect against form hacking on the client-side

Bidirectional data binding in angular 12 reactive forms

Using the foreach Loop in Javascript and AngularJs

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

Updating the input value of one field by typing into another field is not functioning properly when trying to do so for

Alter the Vue view using an object instead of the url router

The watcher fails to function properly when attempting to pass data from a for loop in the parent component

The presence of a white block as the background on a webpage in Ubuntu

Does the jQuery $.each function support conditional looping?

How come Vue.js is not showing the image I uploaded?

Observing Gulp's behavior is quite peculiar - it seems to be running

I'm encountering a type error every time I attempt to render an EJS page. Could someone please take a look and help me troubleshoot?

jQuery toggle functioning in one scenario, but failing in another

How can you make the browser window scroll horizontally when a div is clicked using jQuery?

How to efficiently toggle between multiple classes on a div element using Jquery

Dealing with a Promise and converting it into an array: a step-by-step