We Keep Coding

How can I change the default ordered and unordered list providing various options in Jodit Editor?

I am being able to provide option's in the menu bar but when I click on any of the option it's working absolutely fine,but if I tried to select twice it is changing at all places.
For Ex.
I want to make a ordered list such as:
1.Some Text here
a.option 1 b.option 2
c.option 3 d.option 4.
When I am trying to select some text its also converting 1 to A.
Please help.Thanks in advance
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ol > li').css({'list-style-type':selectedStyle});
You can ignore the counter part its not required.I was trying to put id at every element and use jquery to update only that part.
let counter = 0;
document.querySelectorAll (".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ul > li').css({'list-style-type':selectedStyle});
}
HTML
<div class="order-list-select" id="orderList" draggable="true">
<div>
<span class="jodit_popup_triangle"></span>
<div class="math-toolbar-top" id="orderlistHeader"></div>
<div class="order-list-main">
<div class="order-list-container"></div>
<div class="order-container">
<ol class="upper-roman">
<li><hr></li>
</ol>
<ol class="decimal">
<li><hr></li>
</ol>
</div>
</div>
</div>
</div>
Actual
1.text
2.text
Some text here
1.Txt
2.Txt
Expected
1.text
2.text
Some text here
a.Txt
b.Txt

I did it by Jquery don't know if its right approach but it has made me achieve my task.
Below is the code for my this.
document.querySelectorAll(".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
let select = window.getSelection().focusNode.parentElement.parentElement;
let ul_id = ""
$(select).attr('id', function(i) {
ul_id = "unorder"+(counter);
return ul_id;
});
if(selectedStyle == "right-arrow"){
$('#'+ul_id).css({'list-style-image':`url('icons/list-right-editor.svg')`});
}else if(selectedStyle == "open-square"){
$('#'+ul_id).css({'list-style-image':`url('icons/square-open-editor.svg')`});
}else{
$('ul').attr('type',function(){
return selectedStyle;
})
$('#'+ul_id).css({'list-style-type':selectedStyle});
}
document.querySelector(".unorder-list-select").remove();
})
});
Please change the classess accordingly to get the tag and click.

Using jQuery .each() to read any html value and change it

I want to use the jQuery function .each() to apply a possible change to a value.
I have a bunch of labels in tags with a class="temp". If I have a switch to switch between Celsius and Fahrenheit I would like to update all html elements with the temp class. I will retrieve the value from the span, then update the span to have the new temperature.
Span tags look like
<span class=​"temp" id=​"holder_1443531366" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​86.1​</span>
​<span style=​"padding-left:​3px;​">​°F​</span>​
</span>​
Im sure this isnt the best looking html element, i didnt make it, im using a website to build a web dashboard and cannot actually change these directly.
There is other parts to this code, but I just need the main part working.
//Find all elements with span class="temp"
var temps = [];
var html;
var pHtml;
temps = jQuery('.temp').toArray();
html = jQuery('.temp').html();
//pHtml = jQuery('.temp').parseHTML();
if(temps != null){
console.log("Temps -> "+temps.length);
console.log("html -> "+html);
for(var i = 0; i < temps.length; i++){
console.log(temps[i]);
}
}else {
console.log("No temps found");
}
I have currently two elements to find and this is the output so far
Attempting to find temp classes
Temps -> 2
html -> <span style="">86.0</span><span style="padding-left:3px;">°F</span>
<span class=​"temp" id=​"holder_1443531366" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​86.1​</span>​<span style=​"padding-left:​3px;​">​°F​</span>​</span>​
<span class=​"temp" id=​"holder_1443531376" style=​"text-align:​center;​ display:​inline-block;​">​<span style>​85.38​</span>​<span style=​"padding-left:​3px;​">​°F​</span>​</span>​
I save each element with the ".temp" class, find the temp (86.1) and then use that value to execute my temp converter function (or just some math right there).
With the new value, I will update the element from 86.1 -> the Celsius temp i just calculated.

what this code does, is that on click of the link, it cycles through each element with class .temp and gets the .degrees, converts that to Celsius, and then changes the F to a C.
i added classes on both spans to accomplish this (.degrees and .degType)
$(document).ready(function() {
$('.toC').on('click', function() {
$('.temp').each(function() {
var degrees = $(this).find('.degrees').html();
var cTemp = (parseFloat(degrees - 32) * (parseFloat(5/9))).toFixed(1);
$(this).find('.degrees').html(cTemp);
$(this).find('.degType').html('°C');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;"><span class="degrees">86.1</span>
<span class="degType" style="padding-left:3px;">°F</span>
</span>
<br/><br/>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;"><span class="degrees">212</span>
<span class="degType" style="padding-left:3px;">°F</span>
</span>
<br/><br/>
<a class="toC" href="#">to Celcius<a/>

Here's a way to toggle back and forth
$('a').click(function () {
$('span.temp').each(function () {
if ($(this).find('span:last').text() == '°F') {
$(this).find('span:last').text('°C');
$(this).find('span:first').text(parseFloat((($(this).find('span:first').text() - 32) * 5) / 9).toFixed(2))
} else {
$(this).find('span:last').text('°F');
$(this).find('span:first').text(parseFloat((($(this).find('span:first').text() * 9) / 5) + 32).toFixed(2))
}
})
$(this).text($(this).text() == 'switch to Fahrenheit' ? 'switch to Celsius' : 'switch to Fahrenheit')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="temp" id="holder_1443531366" style="text-align:center; display:inline-block;">
<span style>86.1</span>
<span style="padding-left:3px;">°F</span>
</span>
<span class="temp" id="holder_1443531367" style="text-align:center; display:inline-block;">
<span style>212</span>
<span style="padding-left:3px;">°F</span>
</span>
switch to Celsius

Try using .find() to filter first span , .html(function(index, html){}) to convert Fahrenheit to Celsius , select next span to change F to C
$(".temp").each(function(index, el) {
$(this).find("span:first").html(function(_, temp) {
return ((temp - 32) * 5/9).toFixed(2)
}).next("span").html(function(_, sym) {
return sym.slice(0,1) + "C"
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<span class="temp" id="holder_1443531366" style= "text-align:​center;display:inline-block;"><span style>86.1</span><span style="padding-left:3px;">°F</span></span>
<span class="temp" id="holder_1443531376" style= "text-align:center;display:inline-block;"><span style>85.38</span><span style="padding-left:3px;">°F</span></span>

I've made a working example and tested it to be working
http://jsfiddle.net/a2dax16t/
I've created a sample set of spans as you did, but added a button to trigger the function:
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">86.1</span>
<br/>
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">99</span>
<br/>
<span class="temp" id="holder_1443531366" style="text-align:center;display:inline-block;">102</span>
</span>
<br/>
<button id="btnCelsius">Convert</button>
and here is my function:
$(function () {
$("#btnCelsius").click(function () {
$(".temp").each(function () {
var newValue = $(this).html();
$(this).html(toCelsius(newValue));
});
});
});
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
as you can see, I've created a function to convert to celsius, and used it inside the each() function, and tested it and it's working.
please give it a try and let me know if this is what you want or that you need any extra modifications.

How to use ClassName add entries to a DIV

HTML source:
<span class="specLink">
<specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty>
</span>
<br />
<span class="specLink">
<specialty2><a title="Hand Surgery" href="link3.aspx">Hand Surgery</a></specialty2>
</span>
How can I create a JQuery script which runs during page load to displays the same list taking from the HTML Source listed above?
E.g.:
<div class="justPad">
<a title="Plastic Surgery" href="link2.aspx" class="defaultLinks">Plastic Surgery</a>
</div>
<div class="justPad">
<a title="Hand Surgery" href="link3.aspx" class="defaultLinks">Hand Surgery</a>
</div>
How I would like it to be:
var k = "";
$(".specLink").each(function() {
var aLink = $(".specLink").replace(<%-- Remove the <specialty#></specialty#> tags and only keep the anchor link --%>);
k += '<div class="justPad">'; //.. as many entries that shows up
k += aLink; //.. as many entries that shows up
k += '</div>'; //.. as many entries that shows up
});
//Once I have added
$(".addSpecialties").html(k);
Blank HTML:
<div class="serviceHolder brClear addSpecialties">
//add inside here from the JQuery above
</div>

Something like:
var specialties = $(".specLink a").map(function() {
return $('<div class="justPad">').append( $(this).clone() )[0];
}).toArray();
$(".addSpecialties").empty().append(specialties);

Get element in ID by class

I have some HTML:
<div id="bin">
<span class="item1 selectMe">1</span>
<span class="item2 selectMe">2</span>
<span class="item3 dontSelectMe">3</span>
</div>
I would like to return an array with the values in the span elements which contain the selectMe class. This is what I've written:
var values = [];
$('#bin span.selectMe').each(function() {
values.push($(this).text());
});
However, when I print values to the console, it is always empty. Any thoughts on why I am not iterating through the bin?

What you have should work, but here is a more elegant solution:
var values = $('#bin span.selectMe').map(function() {
return $(this).text();
}).get();

The following should work, however what you paste above should seem to also:
var values = $('#bin span.selectMe').map(function(){
return $(this).html();
});

var values = [];
$('#bin').find('span.selectMe').each(function() {
values.push($(this).text());
});

Javascript Elements with class / variable ID

There's a page with some HTML as follows:
<dd id="fc-gtag-VARIABLENAMEONE" class="fc-content-panel fc-friend">
Then further down the page, the code will repeat with, for example:
<dd id="fc-gtag-VARIABLENAMETWO" class="fc-content-panel fc-friend">
How do I access these elements using an external script?
I can't seem to use document.getElementByID correctly in this instance. Basically, I want to search the whole page using oIE (InternetExplorer.Application Object) created with VBScript and pull through every line (specifically VARIABLENAME(one/two/etc)) that looks like the above two into an array.
I've researched the Javascript and through trial and error haven't gotten anywhere with this specific page, mainly because there's no tag name, and the tag ID always changes at the end. Can someone help? :)
EDIT: I've attempted to use the Javascript provided as an answer to get results, however nothing seems to happen when applied to my page. I think the tag is ALSO in a tag so it's getting complicated - here's a major part of the code from the webpage I will be scanning.
<dd id="fc-gtag-INDIAN701" class="fc-content-panel fc-friend">
<div class="fc-pic">
<img src="http://image.xboxlive.com/global/t.58570942/tile/0/20400" alt="INDIAN701"/>
</div>
<div class="fc-stats">
<div class="fc-gtag">
<a class="fc-gtag-link" href='/en-US/MyXbox/Profile?gamertag=INDIAN701'>INDIAN701</a>
<div class="fc-gscore-icon">3690</div>
</div>
<div class="fc-presence-text">Last seen 9 hours ago playing Halo 3</div>
</div>
<div class="fc-actions">
<div class="fc-icon-actions">
<div class="fc-block">
<span class="fc-buttonlabel">Block User</span>
</div>
</div>
<div class="fc-text-actions">
<div class="fc-action"> </div>
<span class="fc-action">
View Profile
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Compare Games
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Send Message
</span>
<span class="separator-icon">|</span>
<span class="fc-action">
Send Friend Request
</span>
</div>
</div>
</dd>
This then REPEATS, with a different username (the above username is INDIAN701).
I tried the following but clicking the button doesn't yield any results:
<script language="vbscript">
Sub window_onLoad
Set oIE = CreateObject("InternetExplorer.Application")
oIE.visible = True
oIE.navigate "http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=12"
End Sub
</script>
<script type="text/javascript">
var getem = function () {
var nodes = oIE.document.getElementsByTagName('dd'),
a = [];
for (i in nodes) {
(nodes[i].id) && (nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
}
alert(a[0].id);
alert(a[1].id);
}
</script>
<body>
<input type="BUTTON" value="Try" onClick="getem()">
</body>
Basically I'm trying to get a list of usernames from the recent players list (I was hoping I wouldn't have to explain this though :) ).

var getem = function () {
var nodes = document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
}
alert(a[0]);
};
please try it by clicking here!

var getem = function () {
var nodes = document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i]));
}
alert(a[0].id);
alert(a[1].id);
};
try it out on jsbin

<body>
<script type="text/javascript">
window.onload = function () {
var outputSpan = document.getElementById('outputSpan'),
iFrame = frames['subjectIFrame'];
iFrame.document.location.href = 'http://live.xbox.com/en-US/friendcenter/RecentPlayers?Length=1';
(function () {
var nodes = iFrame.document.getElementsByTagName('dd'),
a = [];
for (var i in nodes) if (nodes[i].id) {
(nodes[i].id.match(/fc\-gtag\-/)) && (a.push(nodes[i].id.split('-')[2]));
}
for (var j in a) if (a.hasOwnProperty(j)) {
outputSpan.innerHTML += (a[j] + '<br />');
}
})();
};
</script>
<span id="outputSpan"></span>
<iframe id="subjectIFrame" frameborder="0" height="100" width="100" />
</body>

What does "I can't seem to use document.getElementsByID correctly in this instance" mean? Are you referring to the fact that you are misspelling getElementByID?

So...something like this (jQuery)?
var els = [];
$('.fc-content-panel.fc-friend').each(function() {
els.push(this));
});
Now you have an array of all the elements that have both of those classes.