Tips for implementing the .nex() property from jQuery in CSS styling

Question

Tips for implementing the .nex() property from jQuery in CSS styling

When I add the class "playing", then I will apply custom CSS to the next li tag. Please review my code and see if you understand.

Please take a look at my code.

   <ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul>

JQuery :

$(".playing").next("#head .block").css({"color": "red", "border": "2px solid red"});

Jquery is not working with the next() property :(

javascript jquery html css ajax

Answer 1

Answer №1

In the code, it is searching for a block sibling, not a child of siblings. To fix this, extract the .block and use a find()

$(".playing").next("#head").find(".block").css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul> 
JQuery :

Answer 2

In the code, it is searching for a block sibling, not a child of siblings. To fix this, extract the .block and use a find()

$(".playing").next("#head").find(".block").css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul> 
JQuery :

Answer 3

Answer №2

.next function retrieves the sibling located on the same level, while .block represents a child element of #head and is not on the same level as its siblings.

To select elements after using next, you can utilize find in the following manner:

$(".playing").next("#head")
.find(".block")
.css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul>

Answer 4

.next function retrieves the sibling located on the same level, while .block represents a child element of #head and is not on the same level as its siblings.

To select elements after using next, you can utilize find in the following manner:

$(".playing").next("#head")
.find(".block")
.css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul>

Answer 5

Answer №3

$(".active").prev("#head").find(".block").addClass("highlighted");

.highlighted {
    color: blue;
    border: 2px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="active">li (sibling)</li>
  <li id="head">li <b class="block">(sibling)</b></li>
  <li>li (sibling with class name "start")</li>
  <li>li (the next sibling of li with class name "start")</li>
  <li>li (sibling)</li>
</ul>

Answer 6

$(".active").prev("#head").find(".block").addClass("highlighted");

.highlighted {
    color: blue;
    border: 2px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="active">li (sibling)</li>
  <li id="head">li <b class="block">(sibling)</b></li>
  <li>li (sibling with class name "start")</li>
  <li>li (the next sibling of li with class name "start")</li>
  <li>li (sibling)</li>
</ul>

Tips for implementing the .nex() property from jQuery in CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

"PHP MySQL news error" - An unexpected error occurred

Make the Height of the Parent Div Based on the Position of its Children

Changing the height of a pseudo element according to the width of the viewport in a dynamic way

Shift the position of an HTML element with a border to account for a stationary header

A step-by-step guide on uploading files from the frontend and saving them to a local directory using the fs and express modules

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Can you provide instructions on creating a marker like this in an unordered list?

Adding numerous values to a single key in a JSON object

changing the gradient color stops of an SVG on hover

Attempting to place a different span beneath the current span

Issues arise with loading AngularJS directive properly within the context of service utilization

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

Node JS GET request using fetch stops displaying console outputs after a certain duration

Manage the material-ui slider using play and pause buttons in a React JS application

Exploring the width of Bootstrap 5 Tab Pane content

Obtain asynchronous state in VueJS without the need for intricate v-if conditions

Can one utilize Javascript to write in plain text format?

Extract the text and value from an asp.net treeview by utilizing jQuery or JavaScript

Error: Unable to use the map method on data in Reactjs because it is not

How can JavaScript be used to delete cache and cookies?