My react app is creating a list of steps:
let steps = this.props.formSteps.map((step, i) => {
let stepNum = i +1;
return (
<li className={ i == this.props.currentStepsIndex ? "steps__step active" : "steps__step"} key={"li-"+i}
onClick={this.handleClick.bind(this, i)}>
{step.name}
</li>
);
})
return(
<div className="steps-container">
<ul className="steps">
{steps}
</ul>
</div>
);
With 3 steps, the generated html looks something like this:
<ul class="steps">
<li class="steps__step">Step 1</li>
<li class="steps__step">Step 2</li>
<li class="steps__step active">Step 3</li>
</ul>
I want to select all the previous li steps before the active class and set the background to like green or something.
How do I accomplish this using css?
You may do something like this. You invert the logic and you select all next sibling to remove the background:
.steps__step {
background:green;
}
.active,
.active ~ .steps__step {
background:none;
}
<ul class="steps">
<li class="steps__step">Step 1</li>
<li class="steps__step">Step 2</li>
<li class="steps__step active">Step 3</li>
<li class="steps__step">Step 4</li>
<li class="steps__step">Step 5</li>
</ul>
I am not aware of any css selectors for sibling elements that come before a specific sibling. However, in your specific case you might get the desired result by selecting the elements without the "active" class.
Something like:
.steps__step:not(.active) {
background-color: green;
}
Related
I have managed to get the click function to display the specific items to add class on click.
The behavior im looking for.
Index both list item types because they will have the same amount of items.
On primary-list-item click fire 3 and 4.
Add class hide to all items but the indexed primary-list-item clicked.
Add class to the specifically indexed controls-list-item clicked.
The code submitted doesnt quite index the clicks properly.
Examples and ideas welcome & thankyou in advance.
$('.primary-list-item').click(function(e) {
e.preventDefault();
$('.primary-list-item').removeClass('hide');
$('.controls-list-item').removeClass('show');
$(this).removeClass("hide");
$(this).removeClass("show");
var index = $(this).index();
$('.links-block-list').each(function() {
$('.primary-list-item', this).not(':eq(' + index+')').addClass('hide');
$('.controls-list-item', this).eq(index).addClass('show');
})
});
.hide {
display: none !important;
}
.show {
display: flex;
}
.primary-list-item {
display: flex;
}
.controls-list-item {
display: none;
}
a {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links-block-list">
<li class="primary-list-item">List Item 1</li>
<li class="controls-list-item hide">List Item 1</li>
<li class="primary-list-item">List Item 2</li>
<li class="controls-list-item hide">List Item 2</li>
<li class="primary-list-item">List Item 3</li>
<li class="controls-list-item hide">List Item 3</li>
<li class="primary-list-item">List Item 4</li>
<li class="controls-list-item hide">List Item 4</li>
<li class="primary-list-item">List Item 5</li>
<li class="controls-list-item hide">List Item 5</li>
</ul>
Honestly, having a class hide and show gets confusing. "Show" should just be the absence of hide (or vice versa as you prefer).
Getting rid of that complexity makes the code much easier. You were of course missing the index variable which is just $(this).index() for the clicked item.
$('.primary-list-item').click(function(e) {
e.preventDefault();
var index = $('.links-block-list > .primary-list-item').index(this); // index of clicked item
$('.primary-list-item').not(this).addClass("hide"); // hide all other primary items
$('.controls-list-item').eq(index).removeClass('hide'); // unhide the same index from control list as clicked primary
});
$('#reset').click(function(){
$('.primary-list-item').removeClass("hide");
$('.controls-list-item').addClass("hide");
});
.hide {
display: none !important;
}
.primary-list-item {
display: flex;
}
a {
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links-block-list">
<ul class="links-block-list">
<li class="primary-list-item">List Item 1</li>
<li class="controls-list-item hide">List Item 1</li>
<li class="primary-list-item">List Item 2</li>
<li class="controls-list-item hide">List Item 2</li>
<li class="primary-list-item">List Item 3</li>
<li class="controls-list-item hide">List Item 3</li>
<li class="primary-list-item">List Item 4</li>
<li class="controls-list-item hide">List Item 4</li>
<li class="primary-list-item">List Item 5</li>
<li class="controls-list-item hide">List Item 5</li>
</ul>
</ul>
<button id="reset">reset</button>
I am new to CSS and JQUERY. I want to get all the ids of the LI elements in string under in a JS file to parse further.
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>
I tried below solution but its returning the object and not able to convert it into String
var columns = [];
$(#editSortable+ ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
Kindly suggest.
var columns = [];
$('#editSortable .sortable-list li').each((i, li) => columns.push(li.id))
console.log(columns)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editSortable">
<ul class="sortable-list ui-sortable">
<li id="TEXT_1">Test 1</li>
<li id="TEXT_2">Test 2</li>
<li id="TEXT_3">Test 3</li>
</ul>
</div>
I have this function so if I click for example ITEM 1, the sample1 and sample3 will become red because have that specific class (class1).
The problem is that if I click on another item (for example ITEM2), the red items of ITEM1 will remain red and I need them to turn black and highlight in red ONLY the items of current clicked class in the first list.
What to add to below ready(function() in order to do that? Thank you in advance!
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>
This is the function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});
</script>
Use classes to hold the styles, and then just remove the class on all elements, and add it back on the elements matching the class etc
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').removeClass('red')
.filter('.'+ this.className.split(" ").pop())
.addClass('red');
});
});
.red {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>
Since you are not using class to style items, logic is this, on each click reset color of all items with class .rightcol and after reset add red to one u want. Try something like this:
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').css('color', 'black');
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});
Have you tried using a variable in which you store the name of the class that you last changed its color from? So whenever your function is called you can change the color back to default and update the variable.
Another option would be to first set all classes colors to default and then execute the line to change the color to red.
Actually I'm really very sorry about my question, I'm not sure how to make attention or ask question about this kind of problem.
Please see my code 1st.
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
The jquery code is:
<script>$('#product').click(function () {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists li').click(function () {
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
var item = $(this).data('item');
$('.code3').empty().append(item);
});</script>
You may directly view this at http://codepen.io/alshedupur/pen/YqKGqV
Everything is work fine, but my problem is, when I trigger parent list item like: Product 1 / Product 2 / Product 3
In result I want to empty .code3 span
I try to use $('.code3').empty(); on 2nd action but if I use this, then 3rd action I mean sub list click function not work.
Please see my screenshot for clearly understand what I want:
You need to empty .code3 as well.
$('#product').click(function() {
var pmodel = $(this).data('model');
$('.code1').empty().append(pmodel);
$('.code2').empty();
$('.code3').empty();
});
$('#lists > li').click(function(e) {
e.stopPropagation();
var dmodel = $(this).data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty();
});
$('#lists li ul li').click(function(e) {
e.stopPropagation();
var item = $(this).data('item');
var dmodel = $(this).parents("li").data('product');
$('.code2').empty().append(dmodel);
$('.code3').empty().append(item);
});
#product:hover,
li:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
<li data-product="P1">Product 1
<ul id="sublists">
<li data-item="it1">P1 Item 1</li>
<li data-item="it2">P1 Item 2</li>
<li data-item="it3">P1 Item 3</li>
<li data-item="it4">P1 Item 4</li>
</ul>
</li>
<li data-product="P2">Product 2
<ul>
<li data-item="it1">P2 Item 1</li>
<li data-item="it2">P2 Item 2</li>
<li data-item="it3">P2 Item 3</li>
<li data-item="it4">P2 Item 4</li>
</ul>
</li>
<li data-product="P3">Product 3</li>
<li data-product="P4">Product 4</li>
</ul>
<div id="codes">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
</div>
how to give each <li> different color from other on Html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
so, Iam looking to Display Items as the Following:
Item 1 In red color
item 2 In blue color
item 3 In green color
What is the best way to do it ?
Create different classes like this in css
.redText
{
color:red;
}
.blueText
{
color:blue;
}
.greenText
{
color:green;
}
And then in your html
<ul>
<li class = "redText">Item 1</li>
<li class = "blueText" >Item 2</li>
<li class = "greenText">Item 3</li>
<ul>
<ul>
JSFIDDLE DEMO
Try style component for each list.
<ul>
<li style="color:red">Item 1</li>
<li style="color:blue">Item 2</li>
<li style="color:green">Item 3</li>
</ul>