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.
Related
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;
}
I have some listings.
Currently id is test_3, test_1, test_2. I need number (3,1,2) from id of each li and append this number in to another data attribute. Please check the result section. It will give you an idea about what I am expecting. Thanks
Html
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
Script
$('#cat').attr('id').split("-")[2];
Expected result
<ul id="cat">
<li id="test_3" data-id="3">Text 3</li>
<li id="test_1" data-id="1">Text 1</li>
<li id="test_2" data-id="2">Text 2</li>
</ul>
To achieve this you can loop over the li elements and set the data() based on the number in the id attribute. Try this:
$('#cat li').each(function() {
$(this).data('id', this.id.split('_')[1]);
}).click(function() {
console.log($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can loop through all of the children of the ul element with the id cat.
On each loop, get the ID by getting the id attribute, splitting it on _ and getting the first index.
You can then set the attribute by using JQuery's attribute function, which you can learn more about here.
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
An example of this in action
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
console.log($('#cat').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
This should some your problem.
Using $(this).attr("id").split('_') will split "cat_3" into "cat" and "3" then using [1] after will select "3"
$("#cat li").each(function(){
$(this).attr("data-id", $(this).attr("id").split('_')[1]);
})
console.log($("#cat").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can also use a RegExpression.
var suffix = "test_2".match(/\d+/); // results --> 2
Basically it fetches out numeric value within a string value.
Usage
$('#cat li').each(function() {
$(this).data('id', this.id.match(/\d+/));
})
I have few li elements and I want each of them to be clickable. This is what I have:
<li id="stream-object" data-stream="val1">
<li id="stream-object" data-stream="val2">
<li id="stream-object" data-stream="val3">
and my jquery
$("#stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
});
But this only works on the first li.
This is expected behavior as ID's in HTML must be unique, You can use a common class then use Class Selector (“.class”)
Selects all elements with the given class.
HTML
<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">
Script
$(".stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
});
ID (#) must be unique for page use clasess (.) instead
<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">
$(".stream-object").click(function(){});
An id should be unique. Instead use classes
$(".stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
alert( $(this).html()+' is clicked' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="stream-object" data-stream="val1">Item 1</li>
<li class="stream-object" data-stream="val2">Item 2</li>
<li class="stream-object" data-stream="val3">Item 3</li>
</ul>
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>
HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.