Develop Reference

jQuery newsticker add new list onclick not working properly

I'm using this plugin, Acmeticker.
It's working good. Now I tried to add more list using button .add to add Breaking News 9 at the last of ul. But it's not working as expected. It show together with another li if I click button add, and if I click button more than one it show me duplicate Breaking News 9.
$('.my-news-ticker-3').AcmeTicker({ type:'typewriter',/*horizontal/horizontal/Marquee/type*/
direction: 'right',/*up/down/left/right*/
speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
controls: {
prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
}
});
$('.add').on('click', function()
{
$(".my-news-ticker-3").append('<li>Breaking News 9</li>');
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2><div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<li>Breaking News 1</li>
<li>Breaking News 2</li>
<li>Breaking News 3</li>
<li>Breaking News 4</li>
<li>Breaking News 5</li>
<li>Breaking News 6</li>
<li>Breaking News 7</li>
<li>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>

This plugin adds style i.e :display: none; opacity: 0; to each lis dynamically so when you append new lis you can add this to your li.Also , when you use .append() this will not append lis after Breaking news 8 because position of lis are getting change so to append new lis only after last li you can use data-attr which will helps us to find last li and append new li after that .
Demo Code :
$('.my-news-ticker-3').AcmeTicker({
type: 'typewriter',
direction: 'right',
speed: 50,
controls: {
prev: $('.acme-news-ticker-prev'),
toggle: $('.acme-news-ticker-pause'),
next: $('.acme-news-ticker-next')
}
});
$('.add').on('click', function() {
var lengths = $(".my-news-ticker-3 li").length + 1 //get length of lis
//get refrence of last lis
var get_reference = $(".my-news-ticker-3 li[data-ids=" + $(".my-news-ticker-3 li").length + "]")
//insert new lis
$(`<li style="display: none; opacity: 0;" data-text="Breaking News ${lengths}" data-ids='${lengths}'>Breaking News ${lengths}</li>`).insertAfter($(get_reference))
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>
<h2>Typewriter</h2>
<div class="acme-news-ticker">
<div class="acme-news-ticker-label">Horizontal News</div>
<div class="acme-news-ticker-box">
<ul class="my-news-ticker-3">
<!--added ids to keep track-->
<li data-ids='1'>Breaking News 1</li>
<li data-ids='2'>Breaking News 2</li>
<li data-ids='3'>Breaking News 3</li>
<li data-ids='4'>Breaking News 4</li>
<li data-ids='5'>Breaking News 5</li>
<li data-ids='6'>Breaking News 6</li>
<li data-ids='7'>Breaking News 7</li>
<li data-ids='8'>Breaking News 8</li>
</ul>
</div>
<div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
<span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
<span class="acme-news-ticker-pause"></span>
<span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
</div>
<button class="add">Add</button>

How do I select previous siblings before specific class?

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;
}

How to fecth ID property of LI element under a div tag

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>

How to pass multiple values from a list using JQuery

I have the following list that gets dynamically built and performs the same function as a select box would do.
<ul class="list-group" name="combobox1" id="combobox1">
<li class="list-group-item" value="6" />Option 1</li>
<li class="list-group-item" value="12" />Option 2</li>
<li class="list-group-item" value="15" />Option 3</li>
</ul>
When an item in the list is selected i user Jquery to append 'active' into the class to make 'list-group-item active'.
A user can select one or more list items from the list and click 'Show Details' which will give them details in a popup. This details popup is traggered by the onclick function in a button. My question is how do I use Jquery to get the values of one or more items in the list that a user has selected to pass via the onclick method?
onclick=showDetails(itemsvalues)
This returns one value, but what if there was more than one item selected?
onclick="showdetails($('#combobox1 li.active').val());
Thank you!

First of all use data-value for LI elements.
On LI click add some .active class
On button click get the data-value of the .active elements:
$("[data-value]").on("click", function(){
$(this).toggleClass("active");
});
$("#getValues").on("click", function(){
var values = $("[data-value].active").map(function(){
return $(this).data("value");
}).get();
alert( values );
});
.active{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" name="combobox1" id="combobox1">
<li class="list-group-item" data-value="6">Option 6</li>
<li class="list-group-item" data-value="12">Option 12</li>
<li class="list-group-item" data-value="15">Option 15</li>
</ul>
<button id="getValues">GET SELECTED VALUES</button>
To recap <li value="bla" />huh</li> is invalid markup, so remember to first learn HTML before jumping into JS.

Use .map() to loop over all the elements that match a selector and get an array of the results.
$("#go").click(function() {
var items = $(".list-group-item.active").map(function() {
return $(this).data("value");
}).get();
$("#result").text("You selected " + items.join(', '));
});
$(".list-group-item").click(function() {
$(this).toggleClass("active");
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" name="combobox1" id="combobox1">
<li class="list-group-item" data-value="6" >Option 1</li>
<li class="list-group-item" data-value="12" >Option 2</li>
<li class="list-group-item" data-value="15" >Option 3</li>
</ul>
<button id="go">What did I select?</button>
<div id="result"></div>

var activeItems = $('.list-group-item.active');
That will give you an array of all the active items.
From there you can loop over them and grab the values.
$.each(activeItems, function(key, item){
$(item).val(); // this will give you the value of each active item. You can push it into an array or do what ever you need to with it from here
});
Fiddle: https://jsfiddle.net/qc4y4102/1/

.click function, remove class after clicked

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.