jquery selector for an element MISSING a child element - javascript

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

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: 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

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.

Add a span in a span with JQuery

I'm trying to put a <span> in an other <span> in the title of JQuery's modal but it doesn't work.
Here's my HTML code :
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
And I want to put a <span class="glyphicon glyphicon-info-sign"></span> inside the ui-dialog-title <span>.
I tried to do it like this :
$(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
And it works !
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">
<span class="glyphicon glyphicon-info-sign"></span>Info title
</span>
...
</div>
<div id="1">
But, I will have multiple <span> with the class ui-dialog-title in my document and I want to access this <span> using the id of the next <div>.
I tried this :
$("#"+myId).prev("div").first("span").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
But the glyphicon <span> was placed BEFORE ui-dialog-title <span> :
<div class="ui-dialog-titlebar...">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
I don't understand why it is placed here because with the other method, it works.
I hope you will understand my problem and thank you for your help !
You can do:
$("#"+myId).prev("div").find(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
Working example
Structure:
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title"><span class="glyphicon glyphicon-info-sign"></span>Info title</span>
</div>

Categories