How to make function check class instead of text of elements - javascript

This is my working fiddle:
https://jsfiddle.net/axpbe377/6/
This is the structure of the elements now. Note: class Name and Text for each span is the same.
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>Mon</span>
<span class='Tue'>Tue</span>
<span class='Wed'>Wed</span>
<span class='Thrs'>Thrs</span>
<span class='Fri'>Fri</span>
<span class='Sat'>Sat</span>
<span class='Sun'>Sun</span>
</div>
But I want to change the span text to this now.
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
How do I change the script below, to check for each span's class that matches data for each user, instead of span's text that matches.
$("div.morning_"+ user_id +" span").filter(function(){
return mornings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');

use this.className instead of this.innerHTML
$("div.morning_"+ user_id +" span").filter(function(){
return mornings.indexOf(this.className) > -1;
}).css('color', '#26F525');

You can use hasClass()
// From mornings array, create a string.
// The class names are separated by space
// So can be passed directly to hasClass
var strClasses = mornings.join(' ');
$("div.morning_" + user_id + " span").filter(function () {
// If this element has class from the array, return true
return $(this).hasClass(strMornings);
}).css('color', '#26F525');
You can also use Array#join to create a selector from array and use it directly.
"div.morning_" + user_id + " span." + mornings.join(", div.morning_" + user_id + " span.")
this will give the selector as
div.morning_562f7e42757eb span.Mon, div.morning_562f7e42757eb span.Tue, div.morning_562f7e42757eb span.Sat
which can be passed to jQuery object directly.
Demo:
var mornings = ['Mon', 'Tue', 'Sat'],
user_id = '562f7e42757eb';
var selector = "div.morning_" + user_id + " span." + mornings.join(", div.morning_" + user_id + " span.");
$(selector).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>

Another way is to use a class filter like
var param = 'Mon,Fri',
user_id = '562f7e42757eb';
var mornings = param.split(',');
$("div.morning_" + user_id + " span").filter(mornings.map(function(value) {
return '.' + value.trim()
}).join()).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7e42757eb'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7e42757eb'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
<br/>
<br/>
<div id='2'>
<div class='morning_562f7eae12fd7'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7eae12fd7'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7eae12fd7'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
or
var param = 'Mon,Fri, Sun',
user_id = '562f7e42757eb';
var filter = '.' + param.replace(/\s*,\s*/g, ', .').trim();
$("div.morning_" + user_id + " span").filter(filter).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7e42757eb'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7e42757eb'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
<br/>
<br/>
<div id='2'>
<div class='morning_562f7eae12fd7'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7eae12fd7'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7eae12fd7'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>

Related

How to move the cursor only to the text present inside multiple span tags with left and right arrow key

Can you please help me to write a logic to move the cursor only to the text in a content editable div. Here <span id="katexdivspanidcount_3" has multiple tags so when I try to move the cursor with left or right arrow it is not immediately jumping to the text
<div id="katexrendercontent" contenteditable="" role="textbox" class="form-control"
style="min-height: 100px;padding-left: 5px;padding-right: 5px;font-size: 22px;">
<span id="katexdivspanidcount_1">a</span>
<span id="katexdivspanidcount_2">b</span>
<span id="katexdivspanidcount_3">
<span class="katexmainsupsub" id="katexmainsubsup_0">
<span class="katex-display">
<span class="katex">
<span class="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<semantics>
<mrow>
<msubsup>
<mi>t</mi>
<mn>2</mn>
<mn>3</mn>
</msubsup>
</mrow>
<annotation encoding="application/x-tex">\htmlClass{subsupercount_0
subsupercls}{t_{2}^{3}}</annotation>
</semantics>
</math>
</span>
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height:1.1111em;vertical-align:-0.247em;"></span>
<span class="enclosing subsupercount_0 subsupercls">
<span class="mord">
<span class="mord mathnormal mainchar">t</span>
<span class="msupsub">
<span class="vlist-t vlist-t2">
<span class="vlist-r">
<span class="vlist" style="height:0.8641em;">
<span style="top:-2.12em;margin-left:0em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mtight">
<span class="mord mtight subsup">2</span>
</span>
</span>
</span>
<span style="top:-3.3em;margin-right:0.05em;">
<span class="pstrut" style="height:2.7em;"></span>
<span class="sizing reset-size6 size3 mtight">
<span class="mord mtight">
<span class="mord mtight subsup">3</span>
</span>
</span>
</span>
</span>
<span class="vlist-s">&ZeroWidthSpace;</span>
</span>
<span class="vlist-r">
<span class="vlist" style="height:0.247em;">
<span></span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span id="katexdivspanidcount_4">c</span>
</div>

get the number from class name

I have the div section which is generated dynamically which the class name ends with number.I want to get the number from the class attribute
I want to get the number from the class submission-1 (1),submission-2 (2) and tried as in snippet.I caught the error undefined match function.how to get the number from class attribute
$(document).ready(function(){
var num = $('.submission-').attr('class').match(/\d+$/)[0];
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Try this
$(document).ready(function(){
var classes = $('[class*=submission]').map(function(_,cl) {
return cl.className.split(" ")[1].split("-")[1]; // or just cl.className.split("-")[1];
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Recommendation - use data attributes instead if you can change server code:
$(document).ready(function(){
var classes = $('[data-submission]').map(function(_,sub) {
return $(this).data("submission");
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform" data-submission="2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform" data-submission="3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform" data-submission="4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform" data-submission="12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
You can construct them from the array but since you are looking for a class submission- which doesn't exist you can take into account a common class that exists webform then you can use method get() which converts the jQuery selection novelist into an array and map them to extract the index
$(document).ready(function() {
var indexArray = $('.webform').get().map(element => +element.classList.toString().match(/\d+$/)[0]);
console.log(indexArray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Why don't you use .split("-").pop() like this and also if you need number from all elements then you will need to iterate through all elements like this.
$(document).ready(function(){
var num = [];
$("div[class*=' submission-']").each(function(){
num.push($(this).attr('class').split("-").pop());
});
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>

How do I hide multiple div's with no content?

I have the following code:
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
This content box is generated. I want to hide it if there's no content being generated on the backend. How do I do it? I already tried
if ($('.contentMachine').is(':empty')) {
$('.contentMachine').remove();
}
But it's still not hiding the div's
Here's the fiddle
You need to removed matched elements, so :empty selector with class selector to get the reference of empty elements then apply .remove() method
$('.contentMachine:empty').remove()
You can use pseudo selector empty:
$('.contentMachine:empty').remove();
Update:
You can retrieve the content of contentMachine as a text then play with the result:
$('.contentMachine').each(function () {
var text = $(this).text();
text = text.replace(/(\n|\s)*/mg, '');
if (text === '') {
$(this).remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbarsd">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestampd" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-textd">With content</span>
</div>
</div>
Last update:
You can achieve it by checking all empty element into .contentMachine:
$('.contentMachine :empty').remove();
Demo
Try this:
content = $('.contentMachine').text();
content = $.trim(content);
if (content.length == 0) {
$('.contentMachine').remove();
}
if .contentMachine this div completely has no text anywhere it will remove by this script. I do it with help of rejex.
var regex = "/^.+\s.+$/" ;
$(document).ready(function(){
console.log($(".contentMachine").text().match(regex));
if ($(".contentMachine").text().match(regex) ==null|| $(".contentMachine").text().match(regex) == 0) {
$(".contentMachine").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div></div>
Try this one
jQuery( '.contentMachine:empty' ).remove();

jQuery search matching string and remove parent div

I've an HTML below:
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
and I would like to remove the parent DIV (container) and it's content if a child span contains a word, "this" for example.
The code should search for the word "this" on all spans and delete the divs with the Id "container0" and "container2". I already have the Regex but I'm totally lost after that. I know that I should use querySelector but I never used it before and tried to make it work, but I failed.
/\<span id="term[0-9]{3,}"> this<\/span>/gm
Thank you,
You can use the :contain() selector.
$(document).ready(function(){
$("#keywords").find("span:contains('this')").each(function(){
if($(this).next("span").html()==" is"){ // Watch out for leading space!!!
$(this).parent("div").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> this</span>
<span id="term014"> deserves</span>
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
You can accomplish what you are looking for with jquery by doing something like the following (since you mentioned querySelector, you should know that it can be done with plain javascript as well - see the second code example below).
JQuery:
const spans = $('span');
spans.each(function(index, elem) {
if (elem.textContent.toLowerCase().indexOf('this') >= 0) {
elem.parentNode.remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
Javascript only:
const spans = document.querySelectorAll('span');
for (const span of spans) {
if (span.textContent.toLowerCase().indexOf('this') >= 0) {
span.parentNode.remove();
}
}
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>

jQUERY: Count elements which have do not have a class

I want to get the number of span tags which have class assigned-names but do not have a class named hidden. Following is the HTML code:
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
</div>
So, for the above HTML, The number of span tags which have class assigned-names but do not have class hidden is 1.
I have tried following code, but it gives me length as 2:
$('.assigned-values').find('span.assigned-names:not(:has(.hidden))').length
You can simply filter out the non-required elements using not() function:
const elems = $(".assigned-values > .assigned-names").not(".hidden");
console.log(elems.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
</div>
You can use .not('span.hidden'). .not() method remove elements from the set of matched elements.
console.log($('.assigned-values').find('span.assigned-names').not('span.hidden').length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
</div>
First of all, your JQuery code has missed an 's' in 'span.assigned-name'
I have tried the following code and it works
var element = $('.assigned-values').find('span.assigned-names').not('.hidden').length
console.log(element.length);
The code outputs the value as 1

Categories