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>
Related
Here's my code:
<div id='layer1'>
<div id='a'>
<div id='b'>
<div id='layer2'>
<div id='a'>
<div id='b'>
<div id='layer3'>
<div id='a'>
<div id='b'>
I want to try to get the element [a] of layer1.
Could I do this using pure javascript and withOUT jquery and other stuff?
An ID uniquely identifies one single element on the page. The behavior you described is more like "a class" inside of an ID:
document.querySelector("#counter-for-drinks .up-arrow")
and so if you want a different up-arrow, it is:
document.querySelector("#counter-for-burgers .up-arrow")
document.querySelector() is what is similar to jQuery $(" "). It also has the form document.querySelectorAll() for getting all matched elements.
Your HTML is missing closing tags. You can always validate your code here.
Also, you should use class instead of id.
<div id='layer1'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer2'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer3'>
<div class='a'></div>
<div class='b'></div>
</div>
You can use javascript to get elements:
document.querySelector("#layer1 .a")
var firstA = document.querySelectorAll('#layer1 #a');
var nodeString = '';
if (firstA.length > 0) {
for (var i = 0; i < firstA.length; i++) {
nodeString = nodeString + firstA[i].innerText + '<br/>';
}
}
document.getElementById('founded-nodes').innerHTML = nodeString;
#founded-nodes {
color: brown;
}
<div id='layer1'>
<div id='a'>layer1 aaa</div>
<div id='b'>layer1 bbb</div>
</div>
<div id='layer2'>
<div id='a'>layer2 aaa</div>
<div id='b'>layer2 bbb</div>
</div>
<div id='layer3'>
<div id='a'>layer3 aaa</div>
<div id='b'>layer3 bbb</div>
</div>
<div id="founded-nodes"></div>
As all said in above over comments and answers, one must use a single id on the same page, or else the use of classes is a must. But if you want to achieve this, you can have a look at code.
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>
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.
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.
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()