I am trying to get a DOM element by class and not sure why its returning undefined. I can query the parent element without any problems. Here is my code:
var contentPane = query('.contentPane', this.map.infoWindow.domNode)[0];
var header = query('.header', this.map.infoWindow.domNode)[0];
console.log(header);
console.log(contentPane);
The output in console:
>>undefined
<div class="contentPane">
<div class="esriViewPopup" id="esri_dijit__PopupRenderer_1" widgetid="esri_dijit__PopupRenderer_1">
<div class="mainSection">
<div class="header" dojoattachpoint="_title"></div>
<div class="hzLine"></div>
<div dojoattachpoint="_description"></div>
<div class="break"></div>
</div>
<div class="attachmentsSection hidden">
</div>
<div class="mediaSection hidden">
</div>
<div class="editSummarySection hidden" dojoattachpoint="_editSummarySection">
</div>
</div>
</div>
the .header was not rendered at the time of query. I have resolved this by using query when the containing function was completed.
Related
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
There is a html page with a structure:
<div class="row sem">
<div class="subject"><h3>A</h3></div>
<div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
<div class="subject"><h3>C</h3></div>
<div class="subject"><h3>D</h3></div>
</div>
I have attached a hover event on the uppermost div with:
$(".row.sem").hover(function(){
//my code....
});
Now,when I hover on one of these divs,I want to access the inner content of only those h3 elements which are within my hovered div element.
For this,I tried:
var a = $(this).children(["h3"]);
for(ei in ee){
console.log(ei);
}
But,this printed much more stuff like fadein,fadeout,scroll....The this object does not contain the inner tags of the hovered div.
Please suggest what is wrong in this implementation.
Thanks.
.children() collects direct children elements while you're looking for h3. So you could use .find() method or even (more specific) .children('.subject').children('h3').
$(".row.sem").hover(function(){
// mouse enter
var a = $(this).find("h3");
a.each(function(){
console.log($(this).text());
});
}, function(){
// mouse leave
console.clear();
// ...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
<div class="subject"><h3>A</h3></div>
<div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
<div class="subject"><h3>C</h3></div>
<div class="subject"><h3>D</h3></div>
</div>
see: https://api.jquery.com/children/
This will get the content of the h3 child elements of the .row.sem elements. You needed to get all the children of the div you are hovering over. You can access and modify the html content of these children with .html() and I suggest you look into that method.
$(".row.sem").hover(
function() {
console.log($(this).children().text());
}, function (){}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
<div class="subject"><h3>A</h3></div>
<div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
<div class="subject"><h3>C</h3></div>
<div class="subject"><h3>D</h3></div>
</div>
Clear and simple.
$(".row.sem").hover(function() {
$(this).find("h3").each(function() {
console.log($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
<div class="subject"><h3>A</h3></div>
<div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
<div class="subject"><h3>C</h3></div>
<div class="subject"><h3>D</h3></div>
</div>
If you check MDN documentation for in loop it says that it itarates over "enumerable properties".
Check this post also enumarable properties
Check this out.
$(".row.sem").hover(function(){
// i am list of all headers nested inside element with class "row" and "sem"
// elements(array)
var headers = $(this).find('h3');
// console first element's html from the array.
console.log($(headers[0]).html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
<div class="subject"><h3>A</h3></div>
<div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
<div class="subject"><h3>C</h3></div>
<div class="subject"><h3>D</h3></div>
</div>
Chrome shows a different sort result from other browsers - with Firefox and Edge showing the desired result.
How to achieve the same result with Chrome?
I tried, but not working, with:
$(function(){
var order = $('.files').find('.first','.second').sort(sortMe);
$('.files').append(order);
});
function sortMe(a, b) {
return a.first < b.second;
}
The desired result... and the default in Firefox and other browsers is:
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
</div>
</div>
Chrome returns
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
</div>
Selector at .find('.first','.second') is not correct, where second parameter should log an error Unexpected identifier, try adjusting to .find('.first, .second') without terminating string and including a literal comma , character which would pass two parameters, instead of single selector string, comparing a.dataset -b.dataset, wheredata-*` attributes have 0-based indexing from 0-n.
You can add data-* attribute at elements for comparison function.
$(function(){
var order = $('.files').find('.first, .second').sort(sortMe);
should be$('.files').append(order);
});
function sortMe(a, b) {
console.log(a.dataset)
return +a.dataset.order - +b.dataset.order;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div data-order="0" class="first">first content</div>
<div data-order="1" class="second">second content</div>
<div data-order="1" class="second">second content</div>
<div data-order="0" class="first">first content</div>
</div>
</div>
Solved this problem with jquery, but typically when different test data added to site Chrome returned expected result each time so code not needed this time...
var array = ['first', 'second'];
$.each(array,function(index,value){
$('.files').append($('.'+value));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div class="first">content for 1.1</div>
<div class="second">content for 2.1</div>
<div class="second">content for 2.2</div>
<div class="first">content for 1.2</div>
<div class="first">content for 1.3</div>
<div class="second">content for 2.2</div>
</div>
</div>
I created the following structure:
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 mapContainer">
<div class="GISMap" v-el:map></div>
</div>
<div class="col-md-5 incidentContainer">
<div class="incidentForm">test</div>
</div>
</div>
</div>
</div>
In my JS i want to get an element from the DOM:
init: function() {
initGISMap(this.$els.map);
}
But the this.$els.map does not return a value. Therefore googlemaps cannot initialize. I placed the v-el:map attribute into my div GISMap. Therefore I think it should be found. Did I miss something?
The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?
This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>
IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>
Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.