We Keep Coding

How to get id values from object inner class name?

I have one page create by javascript and I have these fields. How can I navigate and get the inner values just from a class object like this?
<li class="tdays" id="23 8 2021">
<div class="info">Quinta</div>
<div class="date">23</div>
<div class="ev" id="562">
<div class="ev-desc">
<p>undefined</p>
</div>
</div>
</li>
I'd like go get the div class="ev" id="562"
My code at now is
$(document).ready(function() {
var elements = document.getElementsByClassName("tdays");
$('.tdays').click(function() {
// console.log(this.id);
// console.log(this.value)
console.log(this[0]);
});
});

Firstly, note that the id attribute on the .tdays element is invalid - id cannot contain spaces.
To do what you require you can use jQuery's DOM traversal methods to find the .ev related to the clicked .tdays element and read its id. In this case you can use children() or find():
$(document).ready(function() {
$('.tdays').on('click', function() {
let evId = $(this).children('.ev').prop('id');
console.log(evId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="tdays" id="23 8 2021">
<div class="info">Quinta</div>
<div class="date">23</div>
<div class="ev" id="562">
<div class="ev-desc">
<p>undefined</p>
</div>
</div>
</li>
<li class="tdays" id="02 9 2021">
<div class="info">Quinta</div>
<div class="date">02</div>
<div class="ev" id="121">
<div class="ev-desc">
<p>undefined</p>
</div>
</div>
</li>
</ul>

In case the OP considers to give the DOM Api a try and there especially querySelector and querySelectorAll ...
function handleTDaysClick(evt) {
const elmTDays = evt.currentTarget;
const evNode = elmTDays.querySelector('[id].ev');
console.log(evNode.id);
}
document
.querySelectorAll('.tdays')
.forEach(node =>
node.addEventListener('click', handleTDaysClick)
);
.as-console-wrapper {
min-height: 100%!important;
top: 0;
left: auto!important;
width: 50%!important;
}
<ul>
<li class="tdays" id="23-8-2021">
<div class="info">Quinta</div>
<div class="date">23</div>
<div class="ev" id="562">
<div class="ev-desc">
<p>undefined</p>
</div>
</div>
</li>
<li class="tdays" id="02-9-2021">
<div class="info">Quinta</div>
<div class="date">02</div>
<div class="ev" id="121">
<div class="ev-desc">
<p>undefined</p>
</div>
</div>
</li>
</ul>

How can I reset jQuery sorting?

How can I reset the sorting by using jQuery?
The ASC and DESC sorting works perfectly, but I found no way, where I can reset the sorting back to default list with button click:
Jack
Evelyn
Jackson
Mason
James
William
Here the code snippet where the sorting works for ASC and DESC:
$('#sortByNameASC').click(function (){
$('.list .col').sort(function(a,b) {
return $(a).find(".name").text() > $(b).find(".name").text() ? 1 : -1;
}).appendTo(".list");
})
$('#sortByNameDESC').click(function (){
$('.list .col').sort(function(a,b) {
return $(a).find(".name").text() < $(b).find(".name").text() ? 1 : -1;
}).appendTo(".list");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sortByNameASC">Sort ASC</button>
<button id="sortByNameDESC">Sort DESC</button>
<button id="resetSorting">Reset</button>
<div class="list py-2">
<div class="col">
<li class="search-filter name">Jack</li>
</div>
<div class="col">
<li class="search-filter name">Evelyn</li>
</div>
<div class="col">
<li class="search-filter name">Jackson</li>
</div>
<div class="col">
<li class="search-filter name">Mason</li>
</div>
<div class="col">
<li class="search-filter name">James</li>
</div>
<div class="col">
<li class="search-filter name">William</li>
</div>
</div>
I have try with cache the default list, but this doesn't work. Any ideas how I can achieve this

Firstly you should note that your HTML is invalid. li elements cannot be children of a div, only ul or ol. That needs to be corrected in your HTML and current sorting logic.
With regard to your goal of 'resetting' to the original order, you can loop through the elements and store their initial index in the element metadata when the page loads. Then you can use the same pattern you currently have to sort by the original index when the 'reset' button is clicked.
Try this:
let $items = $('.list .col .name');
// store original index order on load:
$items.each((i, el) => $(el).data('index', i));
// restore original order:
$('#resetSorting').on('click', () => {
$items.sort((a, b) => $(a).data('index') > $(b).data('index') ? 1 : -1).appendTo('.col');
});
$('#sortByNameASC').on('click', () => {
$items.sort((a, b) => $(a).text() > $(b).text() ? 1 : -1).appendTo(".col");
});
$('#sortByNameDESC').on('click', () => {
$items.sort((a, b) => $(a).text() < $(b).text() ? 1 : -1).appendTo(".col");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sortByNameASC">Sort ASC</button>
<button id="sortByNameDESC">Sort DESC</button>
<button id="resetSorting">Reset</button>
<div class="list py-2">
<ul class="col">
<li class="search-filter name">Jack</li>
<li class="search-filter name">Evelyn</li>
<li class="search-filter name">Jackson</li>
<li class="search-filter name">Mason</li>
<li class="search-filter name">James</li>
<li class="search-filter name">William</li>
</ul>
</div>

Materialize swipe tabs not working in modal

I am encountering a strange problem.
I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Here is the fiddle: jsfiddle

Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/

Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -
document.addEventListener('DOMContentLoaded', function() {
const options = {
onOpenEnd: (el) => {
M.Tabs.init(el.querySelector('.tabs'), {
swipeable: true
});
}
}
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems, options);
});

angularJS Custom directive functionality works using ng-click but not using ng-mouseOver

Requirement goes like this :- I have left navigation panel which has to be in sync with the items added in the main active view by the user and has to display in tree structure. Basic idea is to provide context aware sub-view that change based on active view.
Custom directive used to display tree structure: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree/blob/master/src/abn_tree_directive.js
my HTML code: (using ng-click)
<div class="add-data-request-panel" style="min-height:1071px;"
ng-click="expandPanel()">
<ul>
<li class="icon-drd icon-drd-diactive" ng-if="panelCollapse" ></li>
<li class="icon-pie-chart icon-pie-active" ng-if="panelCollapse"></li>
<li class="icon-publish-req" ng-if="panelCollapse"></li>
<li class="icon-view-changes" ng-if="panelCollapse"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display" ng-if="panelExpand">
<div class="data-slider-row mtop" ng-click="collapsePanel()">
<div class="slider-row-left">
<span class="first-char" >S</span>
<span class="second-char">ection</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // passing data to tree directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
JS implementation in my controller
$scope.panelExpand = false; //setting default flag
$scope.panelCollapse = true; //setting default flag
$scope.expandPanel = function() {
$scope.panelExpand = true;
$scope.panelCollapse = false;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); // method used for iteration
};
$scope.collapsePanel = function() {
$scope.panelExpand = false;
$scope.panelCollapse = true;
};
my HTML code: (using ng-mouseover which is not working and displaying the data passed to navigation bar)
<div class="add-data-request-panel" style="min-height:1071px;" ng-mouseover="hoverIn()"
ng-mouseleave="hoverOut()">
<ul>
<li class="icon-drd icon-drd-diactive"></li>
<li class="icon-pie-chart icon-pie-active"></li>
<li class="icon-publish-req"></li>
<li class="icon-view-changes"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-show="hoverEdit">
<div class="data-slider-row mtop">
<div class="slider-row-left">
<span class="first-char">S</span>
<span class="second-char">ection1</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // array that holds the data passed in html to custom directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
js Implementation for the ng-mouseOver: (while debugging all the iteration and methods executed as expected)
$scope.hoverIn = function() {
this.hoverEdit = true;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); //method used to iterate the data
};
$scope.hoverOut = function() {
this.hoverEdit = false;
};
Any solution to this issue would be of gr8 help. If there is any other better approach other than the ng-mouseOver and ng-mouseLeave to implement hover, please do let me know.

Conditional innerhtml change

Let's say I have an HTML structure like this:
<li id="jkl">
<div class="aa">
<div class="bb">
<div class="cc">
<div class="dd">
<a ...><strong>
<!-- google_ad_section_start(weight=ignore) -->Test
<!-- google_ad_section_end --></strong></a>
</div>
</div>
</div>
<div class="ee">
<div class="ff">
<div class="gg">
<div class="excludethis">
<a...>Peter</a>
</div>
</div>
</div>
</div>
</div>
</li>
My goal is to set the content(innerhtml) of <li id="jkl"> to '' if inside of <li id="jkl"> there is any word of a list of words(In the example below, Wortliste) except when they are in <div class="excludethis">.
In other words, ignore <div class="excludethis"> in the checking process and show the html even if within <div class="excludethis"> there are one or more words of the word list.
What to change?
My current approach(that does not check for <div class="excludethis">)
Wortliste=['Test','Whatever'];
TagListe=document.selectNodes("//li[starts-with(#id,'jk')]");
for (var Durchgehen=TagListe.length-1; Durchgehen>=0; Durchgehen--)
{
if (IstVorhanden(TagListe[Durchgehen].innerHTML, Wortliste))
{
TagListe[Durchgehen].innerHTML = '';
}
}
with
function IstVorhanden(TagListeElement, Wortliste)
{
for(var Durchgehen = Wortliste.length - 1; Durchgehen>=0; Durchgehen--)
{
if(TagListeElement.indexOf(Wortliste[Durchgehen]) != -1)
return true;
}
return false;
}
Only has to work in opera as it's an userscript.