Develop Reference

Get an element based on window position

What I'm trying to accomplish: When any element with the class "yes" is scrolled to a specific Y position in the window (we'll just pretend it's the very top of the window to keep it simple), I just want to get that element so I can grab some of its attributes.
<div class="container">
<div class="no"></div>
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
<div class="no"></div>
</div>
I've tried this two ways, and this first way works, but it seems terribly inefficient, as it's constantly have to assess the position all of the elements during scroll. There can be a lot. But maybe I'm overestimating how how inefficient it is?
Method 1:
$el = $('.yes');
$el.each(function(){
var distance = $(this).offset().top;
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
// get the stuff
}
});
});
The other way seems more efficient (but maybe not?) but I haven't gotten it to work as needed:
$window.scroll(function(){
var el = document.elementsFromPoint(0, 0);
var $el = $(el);
if($el.hasClass('yes')){
//get the stuff
}
});
This doesn't seem to be working correctly at all. Picks up some child elements ".yes" element, even if those elements don't have the "yes" class themselves, and also fails to pick up other ".yes" elements at all. I don't know why.
(Side note: I've simplified the code examples to remove other efficiencies, such as setTimeout for scrolling and tests to only perform functions if the element I'm trying to get changes, etc… I just need to figure out how to get position testing to work best).

I think what you're looking for is the intersection/observer API
<div class="container">
<div class="no"></div>
<div lang="javascript" class="yes"></div>
<div class="no"></div>
<div lang="python" class="yes"></div>
<div class="no"></div>
<div lang="go" class="yes"></div>
<div class="no"></div>
<div lang="rust" class="yes"></div>
<div class="no"></div>
<div class="end"><h1>HOORAY! YOU KNOW KNOW THE INTERSECTION OBSERVER API</h1>
Read more about it here
</div>
</div>
<script>
let observer = new IntersectionObserver((divs, observer) => {
divs.forEach(div => {
if(div.isIntersecting){
//grab your attributes
var _target = div.target
let theAttr = _target.getAttribute("lang");
console.log('div is intersecting with language attribute of: ' + theAttr);
observer.unobserve(div.target);
}
});
}, {threshold: 1});
document.querySelectorAll('div.container > div.yes').forEach(div => { observer.observe(div) });
</script>
<style>
.container {height: 500vh;}
.no {background-color: #e87e7e;
height: 50vh;}
.yes {background-color: #00800478;
height: 50vh;}
.end{text-align: center;}
</style>
here is mozilla's documentation on the intersection/observer API.

Hide element with same text on the page

I'm trying to hide any text on the page that appears inside a div (with a specific class) more than once. For example, if my page has:
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2017</h3></div>
In this example, I want to use jQuery to check if there is more than one div (with the class of "year") that has the same child h3 text. If so, then hide all except the first, resulting in this:
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"></div>
<div class="year"></div>
<div class="year"><h3>2017</h3></div>
Any help would be much appreciated! Thanks

What I would recommend doing is grabbing all of the elements with $('.year'), and then setting up an array to store the .innerHTML of each element. You can then loop over the elements, and check if their .innerHTML is in this array. If it's not, it gets added to the array. If it already exists, hide the element:
var elements = $('.year');
var existing_content = [];
for (var i = 0; i < elements.length; i++) {
if (existing_content.indexOf(elements[i].innerHTML) === -1) {
existing_content.push(elements[i].innerHTML);
}
else {
$(elements[i]).hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2017</h3></div>
Note that this assumes that the .year elements all have identical content. If only part of the .year content is the same, you will need to update the elements selector to be more specific, and target the elements with identical content directly.
Hope this helps! :)

AppendChild a element above a cerain element

So i have a div element which will be filled dynamically with others divs using the appendChild Method, this should display a list. The User is now able to sort that list with the JqueryUI Sortable option.I also added some sortable option attribues like follows:
Options:
$("#NameContainer").sortable("option", "axis", "y");
$("#NameContainer").sortable( "option", "containment", "parent" );
LIST
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
</div>
Now comes my problem. The appendChild always inserts the new div at the bottom of the container but i want to to add some space at the bottom of to the Container Div with a "br" or something like that. I want to add that space to make sure that when the user sorts the last item of that list it will get sorted correctly because the "containment" bounds sometimes wont allow to sort under the last item.
<div id="NameContainer" class="ui-widget">
<div id="Name_1">John</div>
<div id="Name_2">Jack</div>
<div id="Name_3">Charlie</div>
<div id="Name_4">Sawyer</div>
<div id="Name_5">Yin</div>
<div id="Name_6">Ben</div>
<br><!--SPACEHOLDER-->
</div>
So here comes my Question is there away to appendChild above a certain element? Like a "br" "div" or "p"?

Try this instead of appendChild:
Please note I have used random value to add in div as I don't have your dynamic value.
check fiddle: https://jsfiddle.net/dqx9nbcy/
<div id="NameContainer" class="ui-widget">
<div id="divspacer"></div>
</div>
<button id="btn">ADD Element</button>
$(document).ready(function(){
$("#btn").click(function(){
var parentnode = document.getElementById("NameContainer");
var existnode = document.getElementById("divspacer");
var rand = Math.floor((Math.random() * 10) + 1);
var newName = document.createElement("div");
newName.setAttribute("id", rand);
newName.setAttribute("value", rand);
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = rand;
parentnode.insertBefore(newName,existnode);
});
});

refer http://api.jquery.com/appendto/ but you need to make sure that your are targeting right tag.

You can try with this code snippet.
HTML Snippet
<div id="NameContainer" class="ui-widget">
<div id="Name1">Name1</div>
<div id="Name2">Name2</div>
<div id="Name3">Name3</div>
<div id="Name4">Name4</div>
<br>
<br>
</div>
Javascript Snippet
$(document).ready(function(){
$("#btn").click(function(){
var containerDiv= $("#NameContainer");
var childList = containerDiv.children("div");
var newElementid = childList.length;
var newName = document.createElement("div");
newName.setAttribute("id", "Name"+(newElementid+1));
newName.setAttribute("value", "Name"+(newElementid+1));
newName.setAttribute("class","ui-widget-content");
newName.innerHTML = "Name"+(newElementid+1);
$(childList[childList.length-1]).after(newName);
});
});
This is specific to a situation where there are some elements in the initial list. The same can be modified for dynamic list of implementation by validating that childList.length is != 0 before using the same.

targeting a div in an ocean of nested dynamically added divs

I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!

Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);

You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET

Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div

you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});

Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.

JQuery : Remove class, not child content

I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How

Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith

Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}

Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);