I'm looking to find a way to check if classes in an element matches those in another element. I have tried using code below:
Using dataset seems to work, however, I'm looking to explore the possibility of doing this through pure Javascript. The line that works is commented out (var matches = first.dataset.name === second.dataset.name;) and the line that I'm having difficulty getting to work is (var matches = first.classList === second.classList;)
javascript:
//check for 2 matching squares
function checkIfMatches() {
//var matches = first.dataset.name === second.dataset.name;
var matches = first.classList === second.classList;
matches ? disable() : unflip();
}
html:
<li class="card">
<i class="pa pa-test"></i>
</li>
<li class="card">
<i class="pa pa-test"></i>
</li>
Thanks for any help. If more details are needed you can comment.
Use Array spread [...classList] to make the classList an Array, then check if every member is contained in the classList of the other using Array.prototype.every().
function sameClassList({classList: x},{classList: y}) {
return [...x].every(z=>y.contains(z))
&& [...y].every(z=>x.contains(z));
}
console.log(sameClassList(a,b)); // true
console.log(sameClassList(a,c)); // false
console.log(sameClassList(b,c)); // false
<div class="foo bar" id="a"></div>
<div class="bar foo" id="b"></div>
<div class="foo bar baz" id="c"></div>
Taking the comments into account, this solves it independently of the order.
Changed the example a bit, so it could be executed.
//check for 2 matching squares
function checkIfMatches() {
var elements = document.getElementsByClassName('card')
var first = elements[0].getElementsByTagName('i')[0]
var second = elements[1].getElementsByTagName('i')[0]
var matches = first.classList.length === second.classList.length
first.classList.forEach(entry => matches = matches && second.classList.contains(entry))
console.log(matches)
// matches ? disable() : unflip();
}
checkIfMatches()
<li class="card">
<i class="pa pa-test"></i>
</li>
<li class="card">
<i class="pa pa-test"></i>
</li>
Related
I am trying to iterate through the body tag and all its children deep like if one of the children of the body contains other children, I want to be to reach those as well, I am trying to come up better and faster algorithm can anyone help to come up a better one other than mine?
<body>
<div class = "header-section">
<header class = "header-himself">
<div class = "nav-section">
<nav class = "nav-himself">
<div class = "list-section-left">
<ul class = "list-itself-left">
<li>Darster</li>
<li>Company</li>
<li>Safety</li>
<li>Help</li>
</ul>
</div>
<div class = "list-section-right">
<ul class="list-itself-right">
<li>Service</li>
<li>Dart In</li>
<li>Dart Out</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
</body>
var target = document.querySelector('body');
function getChildren(target) {
if(target.children.length === 0) {
return;
}
for(var i = 0; i < target.children.length; i++) {
console.log(target.children[i].tagName);
getChildren(target.children[i]);
}
}
getChildren(target);
Here's a very simple tree walker:
const walkDOMTree = (visitor, types = [Node.ELEMENT_NODE]) => (node) => {
if (types == "*" || types .includes (node .nodeType)) {
visitor .visit (node)
}
node .childNodes .forEach (walkDOMTree (visitor, types))
return visitor
}
const visitor = (captured = []) => ({
visit: (node) => {if (node .nodeName == 'LI') captured .push (node.textContent)},
captured
})
const v = visitor ()
walkDOMTree (v) (document)
console .log ('LI content: ', v .captured)
<div class = "header-section">
<header class = "header-himself">
<div class = "nav-section">
<nav class = "nav-himself">
<div class = "list-section-left">
<ul class = "list-itself-left">
<li>Darster</li>
<li>Company</li>
<li>Safety</li>
<li>Help</li>
</ul>
</div>
<div class = "list-section-right">
<ul class="list-itself-right">
<li>Service</li>
<li>Dart In</li>
<li>Dart Out</li>
</ul>
</div>
</nav>
</div>
</header>
</div>
walkDOMTree accepts a visitor -- simply an object with a visit method -- and optionally an array of the nodeTypes you care to visit. (If you supply '*', it will visit all node types, including attributes, comments, CDATA, etc. By default, it will visit only elements.) It returns a function that takes a DOM node and then recursively calls the visitor's visit function on that node and each of its descendants in document order.
I would often write this to accept a simple function, visit, rather than an object that has such a function. But this version makes it easier for your visitor to do useful things like collecting some data, as shown here, where our tree-walker visits all elements, and the visitor collects the text of all the LI elements.
However, I wouldn't likely use such a function nowadays, as browsers already supply a built-in TreeWalker API. If this is just for learning, then please feel free to play with the above, but for production work, use the standards!
You can just use the * selector.
var allBodyNodes = document.body.querySelectorAll('*');
I am trying to retrieve a DOM element from an array, and I want to set it as a variable to use outside its scope. Right now, my variable future_devices returns one object as expected. But my other variable future_device returns the object when the current DOM should have returned [] due to my last if statement. I originally tried to declare my variables as var due to scope but that did not help. Here is my code:
var future_devices = $('.hardware .future-hardware')
if (future_devices.length) {
let future_device = $(future_devices)
.each(function() {
let device = this
let device_work_order = $(device)
.data(
'work-order'
)
if (device_work_order == data['new_host']['work_order']) {
return device
}
})
I can tell you on the said DOM, the two variables I am using to compare have the following values:
device_work_order = 3MOD0
data['new_host']['work_order'] = 3MOD9
So since future_devices returns only one object and my last if statement is not true, I should get [], right?
$(...) is returning the jQuery collection and always will regardless. So an assignment statement using .each() is the wrong approach.
Solution: Assign the return of .filter() instead. Filter is designed to accomplish your goal. Reference
NOTE: You should realize that if there is more than one match, it will return the entire collection of matches. In the code below I show only the first match, but since there are two matches (for demonstration), you'll see that both matches are returned.
const future_devices = $('.hardware .future-hardware');
const data = {new_host: {work_order: 333}};
const future_device = $(future_devices)
.filter(function(idx, el) {
let device_work_order = $(el).data('work-order');
if (device_work_order == data['new_host']['work_order']) {
return true;
} else {
return false;
}
})
console.log("First match only: ", future_device[0]); // First match
console.log("Collection: ",future_device); // All matches
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hardware">
<div class="future-hardware" data-work-order="111">111</div>
</div>
<div class="hardware">
<div class="future-hardware" data-work-order="333">First Match</div>
</div>
<div class="hardware">
<div class="future-hardware" data-work-order="111">111</div>
</div>
<div class="hardware">
<div class="future-hardware" data-work-order="333">Second Match</div>
</div>
<div class="hardware">
<div class="future-hardware" data-work-order="111">111</div>
</div>
<div class="hardware">
<div class="future-hardware" data-work-order="111">111</div>
</div>
Im trying to achieve this piece of code but in my console it says thing is null which is weird because when I look in the console, sessionStorage isn't empty...
$(".btn-alert").click(function(){
var identifierOfSpan = $(this > "span").text();
for(var prop in sessionStorage){
var thing = JSON.parse(sessionStorage.getItem(prop))
if(thing.id == identifierOfSpan){
sessionStorage.removeItem(prop);
}
}
$(this).closest(".voyages").remove();
if(sessionStorage.length == 0){
alert("Message!");
location.href="reservation.html"
}
});
the button is supposed to delete the div and the sessionStorage item which looks like this
Html :
<div class="voyages">
<button class="btn btn-alert btn-md mr-2" tabindex="-1">delete the flight</button>
<span>ID : 4224762</span>
<div class="infos">
<img src="img/angleterre.jpg" alt="maroc">
<div>
<ul>
<li><h5>Angleterre, Londres (LON)</h5></li>
<li><h5>2 adulte(s)</h5></li>
<li><h5> Aucun enfants </h5></li>
<li><h5>Type : Couple</h5></li>
</ul>
</div>
</div>
<hr>
<h3>Options</h3>
<ul>
<li>voiture : 0</li>
<li>Hotel : 0 </li>
</ul>
<hr>
<h3>Prix :3713$</h3>
If I'm reading your question correctly, you want to...
Click on a button
Find the first sibling <span> element and parse a number out of its text content
Remove all sessionStorage items (JSON serialized objects) with matching id properties
For the ID, I highly recommend adding some data directly to the <button> to help you identify the right record. If you can, try something like
<button class="btn btn-alert btn-md mr-2" data-voyage="4224762"...
Try something like this
$('.btn-alert').on('click', function() {
const btn = $(this)
const id = btn.data('voyage')
// or, if you cannot add the "data-voyage" attribute
const id = btn.next('span').text().match(/\d+$/)[0]
// for index-based removal, start at the end and work backwards
for (let i = sessionStorage.length -1; i >= 0; i--) {
let key = sessionStorage.key(i)
let thing = JSON.parse(sessionStorage.getItem(key))
if (thing.id == id) {
sessionStorage.removeItem(key)
}
}
// and the rest of your code
btn.closest(".voyages").remove();
if(sessionStorage.length === 0) {
alert("Message!");
location.href = 'reservation.html'
}
})
The problem with using a for..in loop on sessionStorage is that you not only get any item keys added but also
length
key
getItem
setItem
removeItem
clear
<ul id='parent_of_all'>
<li>
<span class='operator'>&&</span>
<ul>
<li>
<span class='operator'>||</span>
<ul>
<li>
<span class='operator'>&&</span>
<ul>
<li>
<span class='condition'>1 == 1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class='condition'>1 != 0</span>
</li>
</ul>
</li>
</ul>
to
{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]}
As of now, I know the basics of jQuery, JavaScript. I need to know where to start thinking in order to accomplish the above conversion.
And the html tree could be more complex with more children.
You can do this with each and map
var obj = {}
var span = $('li > span').not('ul li span').text();
$('ul li span').each(function() {
var text = $(this).text().split(' ');
obj[span] = (obj[span]||[]).concat({lhs: text[0], comparator: text[1], rhs: text[2]});
});
console.log(obj)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<span>&&</span>
<ul>
<li>
<span>1 == 1</span>
</li>
</ul>
<ul>
<li>
<span>1 != 0</span>
</li>
</ul>
</li>
You will need a way to select the first level of li, I assumed you have a parent element with an id such as list. I wrote the following code using basic jquery so you can understand it.
var result = {};
var $all_li = $('#list').children('li'); // selecting the first level of li
for(var i in $all_li){ // iterating all_li using for (you may use forEach )
var $current_li = $( $all_li[i] ); // getting operator from first span
var operator = $current_li.children('span').html(); // the text of the operator
var $inner_spans = $current_li.find('>ul >li >span'); // getting list of children spans (from path $list>li>ul>li>span)
var li_spans = []; // an array where we will put the inner span objects
for(var j in $inner_spans){ // iterating the inner spans
var text = $($inner_spans[j]).html().split(" "); // splitting the html
li_spans.push({
lhs: text[0],
comparator: text[1],
rhs: text[2]
}); // adding the splitted html to an object. Note: error if text didn't have 2 white spaces
}
result[operator] = li_spans; // adding the operator key and li_spans value to the result json
}
This code will parse the html and construct the result json, it should work for the html format you provided. Keep in mind that it does not handle errors (such as bad tree format).
simmiar html formats.
Thanks #Alexandru and #Nenad for giving a start. I have been able to complete this on my own.
Below is the function that generates json.
function prepare_json(current_node){
var object = {}
var span = $(current_node).children('span')
if (span.hasClass('condition')){
var text = span.html().split(" ");
object = {lhs: text[0], comparator: text[1], rhs: text[2]}
}
else if(span.hasClass('operator')){
var operator = span.text()
object[operator] = (object[operator] || [])
var children = $(current_node).children('ul').children('li')
for(var i = 0; i < children.length; i++){
var child_pql = prepare_json([children[i]])
object[operator].push(child_pql)
}
}
return object
}
Below is the code that calls that function:
var parent_node = $('#parent_of_all').children('li')
var json = JSON.stringify(prepare_pql_json(parent_node), null, 2)
I am creating ListView using my template:
HTML:
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="ItemTemplate">
<div class="back"></div>
<div data-win-bind="innerText:Info.shortName" class="shortName"></div>
<div data-win-bind="innerText:value Converters.BeginValue" class="value"></div>
<div data-win-bind="innerText:value Converters.EndValue" class="valueEnd"></div>
<div data-win-bind="innerText:Info.longName"></div>
<img data-win-bind="src:Info.flag" class="flag" />
<div data-win-bind="innerText:change Converters.BeginChange" class="change"></div>
<div data-win-bind="innerText:change Converters.EndValue" class="changeEnd"></div>
<div data-win-bind="innerText:changePercent Converters.BeginChangePercent" class="changePercent"></div>
<div data-win-bind="innerText:changePercent Converters.EndValue" class="changePercentEnd"></div>
</div>
</div>
The issue is when I meet the very long name I need to adjust font-size.
So I do (for each element in list):
JavaScript:
template = document.getElementById('ItemTemplate');
// Adjust font - size
var name = item.data.Info.longName;
// Split by words
var parts = name.split(' ');
// Count words
var count = parts.filter(function(value) {
return value !== undefined;
}).length;
var longNameDiv = $(template).children("div").children("div").eq(4);
if (count > 2) {
// Display very long names correctly
$(longNameDiv).removeClass();
$(longNameDiv).addClass("veryLongName");
}
var rootDiv = document.createElement('div');
template.winControl.render(item.data, rootDiv);
return rootDiv;
CSS:
.veryLongName {
font-size: 10pt;
}
But it doesn't effect selectivly. Moreover seems like it is check conditions for the first time and then just apply the same setting for remaining items. But it needs to change font-size to smaller only in case if the name is too long. So what am I doing wrong? Thanks.
Try by using following code instead, but u must include jquery for it.
jsfiddle : http://jsfiddle.net/vH6G8/
You can do this using jquery's filter
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 5);
}).addClass('more_than5');
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 10);
}).removeClass('more_than5').addClass('more_than10');
DEMO