We Keep Coding

How to get only child elements outside a certain class jquery

This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>

console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.

Selecting nested elements

I have a page hierarchy like this:
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
....
So I have a bunch of these panels with nested panels inside, and I'm trying to create on on click handler for the delete buttons of the top level panels only (so the ones immediately inside panels that do not have an association id). The only different between the parent and child panels is that the child ones have the extra attribute "association-id".
So I can select the top level panels only like so:
$('.panel[attribute-id]:not([association-id]')
But if I try to get the delete buttons from from these like:
$('.panel[attribute-id]:not([association-id] .delete')
Obviously I'm still going to get the child buttons.
I can't modify the html in anyway, how could I go about doing this?

$(':not(.panel[attribute-id][association-id]) > .delete')
seems to do the trick.
jsfiddle
I've changed .panel-group to .panel to get it to work with the HTML provided.

Wrap them all in a div and assign that div a unique class. Then you can use jquery selector ".panel-group > .panel" to get only direct children of top level.
<div class="panel-group">
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
<div class="panel" attribute-id="11">
<button class="delete">
<div class="panel" attribute-id="12" association-id="120">
<button class="delete">
</div>
</div>
</div>

You can use the children method:
$('.panel-group[attribute-id]').children('button').first()

jQuery DataTables append div to specific place

I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.

You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());

Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');

How to detect "class" from clicked "div", having several items with same class name?

I have a scenario somewhat like this,
<div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a href=url>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>
and, I'm to .slideToggle() the div with classname activity of that particular div whenever user clicks upon any element inside div with classname check.
I've came up with this one,
$(document).ready(function(){
$(".check").click(function(){
$(".activity").slideToggle();
});
});
And, as it's seen, its should not work, as it acts upon all the divs with classname activity.
And I can't change the classnames into ids, as these are auto populated through another function, and easier for styling through css and maintenance.
I want it to act upon only that div on which user will click.
How can I do so?
Thanks :)

Just select it properly, and make sure you use .activity instead of .user-activity (which doesn't exist):
$(".activity", this).slideToggle();
or
$(this).find(".activity").slideToggle();
See it in action here:
$(document).ready(function(){
$(".check").click(function(){
$(".activity", this).slideToggle();
});
});
.check .activity {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
<div class="check">
<p class="user-name">
<a>name</a>
</p>
<i class="user-icon"></i>
<div class="activity">
<p class="status">Status</p>
<p class="stream">Stream</p>
</div>
</div>
</div>

The event handler will be called in the context of the element upon which it was fired, so just use this to access it.
You can combine that with jQuery's find method to look for the associated descendant element.

You can use find selector to find activity element in currently clicked div:
$(".check").click(function(){
$(this).find('.activity').slideToggle();
});

You may also use this Demo:
$(document).ready(function(){
$(".check").click(function(){
$(this).children('.activity').slideToggle();
//OR you may also use $(this).find('.activity').slideToggle();
});
});

How can I link the scrolling of two divs that are dynamically loaded without using .on?

I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?