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>
Related
I have the following html structure
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
And what I want to do is to get the count of child divs that contains different data attribute. For example, I'm trying this:
$(`div[id*="child_"]`).length); // => 6
But that code is returning 6 and what I want to retrieve is 4, based on the different data-customId. So my question is, how can I add a filter/map to that selector that I already have but taking into consideration that is a data-attribute.
I was trying to do something like this:
var divs = $(`div[id*="child_"]`);
var count = divs.map(div => div.data-customId).length;
After you getting the child-divs map their customid and just get the length of unique values:
let divs = document.querySelectorAll(`div[id*="child_"]`);
let idCustoms = [...divs].map(div=>div.dataset.customid);
//idCustoms: ["100", "100", "100", "20", "323", "14"]
//get unique values with Set
console.log([... new Set(idCustoms)].length);//4
//or with filter
console.log(idCustoms.filter((item, i, ar) => ar.indexOf(item) === i).length);//4
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
Note: $ is equivalent to document.querySelectorAll in js returns a NodeList that's why I destructure it by the three dots ...
You'll have to extract the attribute value from each, then count up the number of uniques.
const { size } = new Set(
$('[data-customId]').map((_, elm) => elm.dataset.customid)
);
console.log(size);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
No need for jQuery for something this trivial, though.
const { size } = new Set(
[...document.querySelectorAll('[data-customId]')].map(elm => elm.dataset.customid)
);
console.log(size);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
Note that the property customid is lower-cased in the JavaScript. This could be an easy point of confusion. You might consider changing your HTML from
data-customId="14"
to
data-custom-id="14"
so that you can use customId in the JS (to follow the common conventions).
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>
I created a javascript script to create a couple of divs. Now i want to use javascript again but i can't get a way of doing it.
data.map((_r) => {
classesList.innerHTML += `
<div class="class" name=${_r.name} >
<div class="top">
<h1>${_r.name}</h1>
<i class="fas fa-arrow-down"></i>
</div>
<div class="bottom">
<p>${_r.count}</p>
</div>
</div>
`;
});
Using the document.querySelectorAll(".class") to get the inserted elements returns an empty NodeList
data = [{ name:'Steve',count:10 },{name:'Everst',count:1}];
let html='';
data.map((_r) => {
html += `
<div class="class" name=${_r.name} >
<div class="top">
<h1>${_r.name}</h1>
<i class="fas fa-arrow-down"></i>
</div>
<div class="bottom">
<p>${_r.count}</p>
</div>
</div>
`;
});
document.body.innerHTML=html;
let divs = document.querySelectorAll(".class");
console.log(divs)
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.
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.