jQUERY: Count elements which have do not have a class - javascript

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

Related

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>

How to hide and show information according to a given ID

I can already hide/show elements in my script, but not properly. Each element has a unique data attribute. I also gave them an ID to reunite all elements in the same variable. But when I conselo-log my var named "roleId", it will output only the first data attribute element, which is why my mouseover event only works for the first item as shown above:
HTML:
<div id="#role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div id="#role" data-role="2">
<span class="default">Default Content 2</span>
<span class="mouseover-content hidden">Mouseover Content 2</span>
</div>
<div id="#role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div id="#role" data-role="3">
<span class="default">Default Content 3</span>
<span class="mouseover-content hidden">Mouseover Content 3</span>
</div>
JS:
var role = $('*#role');
role.mouseover(function(){
roleId = role.attr('data-role');
console.log(roleId); // Will output 1
var roleHash = $('[data-role="' + roleId + '"]');
roleHash.find('.default-content').addClass('hidden');
roleHash.find('.mouseover-content').removeClass('hidden');
});
Appreciate any help.

Instead of repeating Id's use class say role and then try this:
var roles = $('.role');
roles.mouseover(function(){
roleId = $(this).attr('data-role'); //use $(this)
console.log(roleId);
//var roleHash = $('[data-role="' + roleId + '"]'); //no need
$(this).find('.default-content').addClass('hidden'); //use $(this)
$(this).find('.mouseover-content').removeClass('hidden'); //use $(this)
});
DEMO

You should use a class and also you are using # in id in html which is not correct.
HTML with use of class will be like this :
<div class="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div class="role" data-role="2">
<span class="default">Default Content 2</span>
<span class="mouseover-content hidden">Mouseover Content 2</span>
</div>
<div class="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div class="role" data-role="3">
<span class="default">Default Content 3</span>
<span class="mouseover-content hidden">Mouseover Content 3</span>
</div>
And your jQuery code will be :
$('.role').mouseover(function(){
roleId = $(this).data('role');//use jquery data API
console.info(roleId);
//uninitialize mouseover effect so that if someone mouseovered on a .role before it should show like default
$('.role').each(function(index){
$(this).find('.default-content').removeClass('hidden');
$(this).find('.mouseover-content').addClass('hidden');
});
$(this).find('.default-content').addClass('hidden');
$(this).find('.mouseover-content').removeClass('hidden');
});
$('.role').mouseover(function(){
roleId = $(this).data('role');//use jquery data API
console.info(roleId);
//uninitialize mouseover effect so that if someone mouseovered on a .role before it should show like default
$('.role').each(function(index){
$(this).find('.default-content').removeClass('hidden');
$(this).find('.mouseover-content').addClass('hidden');
});
$(this).find('.default-content').addClass('hidden');
$(this).find('.mouseover-content').removeClass('hidden');
});
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div class="role" data-role="2">
<span class="default">Default Content 2</span>
<span class="mouseover-content hidden">Mouseover Content 2</span>
</div>
<div class="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div class="role" data-role="3">
<span class="default">Default Content 3</span>
<span class="mouseover-content hidden">Mouseover Content 3</span>
</div>

in html, id must be unique. No same ids can be in the same html file or odd things would happen.
instead of using id="role", use class="role". and use class selector, which is $(".role") in jquery. It will return an array of elements. you can get rid of data-attribute then. jquery support array binding, so you can bind the same function to every element in the array.
$(".role").mouseover(function() {
// something
});

Html element Id's cannot start from # , try removing the # from all the div tags and run the program.

Since id's need to be unique, you'll want to change the id of your data-role elements so they don't conflict (or use a data attribute like I'm doing below).
Something like this might work for you:
HTML
<div data-type="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div data-type="role" data-role="2">
<span class="default">Default Content 2</span>
<span class="mouseover-content hidden">Mouseover Content 2</span>
</div>
<div data-type="role" data-role="1">
<span class="default">Default Content</span>
<span class="mouseover-content hidden">Mouseover Content</span>
</div>
<div data-type="role" data-role="3">
<span class="default">Default Content 3</span>
<span class="mouseover-content hidden">Mouseover Content 3</span>
</div>
Javascript
var $role = $('[data-type="role"]'); // prefixing vars that are jquery objects with $ is pretty common
$role.mouseover(function(){
var roleId = $(this).data('role');
var $roleHash = $('[data-role="' + roleId + '"]');
$roleHash.find('.default').addClass('hidden'); // there aren't any elements with default-content class
$roleHash.find('.mouseover-content').removeClass('hidden');
});

Toggle jquery is not working correctly

I am using a function like I want to show just one tab at one like if I click others will hide and I also want to toggle the open tab too.
The .show() JQuery just appear on first first tab not others.
JQuery :
$('#toClick').click(function() {
$('#toShow').hide();
$(this).parent('#hideShow').find('#toShow').toggle();
});
HTML :
<span id="hideShow">
<span id="toClick">tab 1</span>
<span id="toShow">Tab 1 content</span>
</span>
<span id="hideShow">
<span id="toClick">tab 2</span>
<span id="toShow">Tab 2 content</span>
</span>
<span id="hideShow">
<span id="toClick">tab 3</span>
<span id="toShow">Tab 3 content</span>
</span>

id should be unique in same document change the duplicate ones by a general class, check example bellow :
<span class="hideShow">
<span class="toClick">tab 1</span>
<span class="toShow">Tab 1 content</span>
</span>
<span class="hideShow">
<span class="toClick">tab 2</span>
<span class="toShow">Tab 2 content</span>
</span>
<span class="hideShow">
<span class="toClick">tab 3</span>
<span class="toShow">Tab 3 content</span>
</span>
Then use class selector . :
$('.toClick').click(function() {
$('.toShow').hide();
$(this).parent('.hideShow').find('.toShow').show();
});
Hope this helps.

jquery selector for an element MISSING a child element

I am needing help forming a jquery selector to return elements which are missing a particular child element.
Given the following HTML fragment:
<div id="rack1" class="rack">
<span id="rackunit1" class="rackspace">
<span id="component1">BoxA</span>
<span id="label1">Space A</span>
</span>
<span id="rackunit2" class="rackspace">
<span id="label2">Space B</span>
</span>
<span id="rackunit3" class="rackspace">
<span id="component2">BoxA</span>
<span id="label3">Space C</span>
</span>
</div>
<div id="rack2" class="rack">
<span id="rackunit4" class="rackspace">
<span id="component3">BoxC</span>
<span id="label4">Space D</span>
</span>
<span id="rackunit5" class="rackspace">
<span id="label5">Space E</span>
</span>
<span id="rackunit6" class="rackspace">
<span id="component4">BoxD</span>
<span id="label6">Space F</span>
</span>
</div>
Find for me the rackunit spans with NO component span.
Thus far I have:
$(".rack .rackspace") to get me all of the rackunit spans, not sure how to either exclude those with a component span or select only those without one...

I guess the following should work:
$(".rack .rackspace:not(:has(span[id^=component]))"). ...
DEMO: http://jsfiddle.net/WbCzj/

You could use .filter():
$('.rack .rackspace').filter(function() {
return $(this).find('span[id^="component"]').length === 0;
});

Categories