Develop Reference

How to get id of div using jquery?

{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?

If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>

how to programmaticaly change div position in html using Javascript?

A parent div contains multiple divs, one div named .div_object_last should always be at the end. Like the example below :
HTML
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last"></div>
<div class="div_object">3</div> <!--- append -->
</div>
Javascript :
$('#div_parent').append('<div class="div_object">3</div>');
Expected result using JS :
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object">3</div>
<div class="div_object_last"></div> <!--- moved to end --->
</div>
I was wondering if it was possible to put div_object_last at the end after the append event ?

Select the .div_object_last and use before() to add the new content:
$('.div_parent .div_object_last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>

To insert an element before the last child element:
$('.div_parent').children().last().before('<div class="div_object">3</div>');
To move an existing element to be the last:
$('.div_object_last').appendTo('.div_parent');
To move el1 above/below el2:
// Above
$(el1).before(el2);
// Below
$(el1).after(el2);

You can try with this dynamic way :
$('.div_parent').append($('.div_parent .div_object_last'));

$('.div_parent div:last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>

It's possible to nest several angular scripts?

I'm trying to nest two scripts, but the second one that opens and closes, closes the first one instead of the second one I open.
I'm using AngularJS in the frontEnd.
The structure is as follows:
<list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
resolve="{openPaisModal: ctrl.openPaisModal,
openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
paisService: ctrl.paisService}"
required="true"
template-url="libro.edicion.html">
</list-form>
<script type="text/ng-template" id="edicion.agente.html">
<uib-accordion close-others="oneAtATime" class="col-sm-12">
<div uib-accordion-group class="panel-default" is-open="element.desplegado"
heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
<input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
</div>
</div>
</div>
<div class="row">
<!-- Inside this row I'm trying to create another list-form and its script -->*
</div>
</div>
</uib-accordion>
</script>
Is there any way to do that?
EDIT 1
I'm not trying to load scripts asynchronously. Added my solution with the code.

No you can't do that.
You can merge the two script as single file, like: But you can copy the code from second script file and past the code inside of first script file, then you just call the first script file.

I was trying to do that:
<list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
resolve="{openPaisModal: ctrl.openPaisModal,
openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
paisService: ctrl.paisService}"
required="true"
template-url="libro.edicion.html">
</list-form>
<script type="text/ng-template" id="edicion.agente.html">
<uib-accordion close-others="oneAtATime" class="col-sm-12">
<div uib-accordion-group class="panel-default" is-open="element.desplegado"
heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
<input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
</div>
</div>
</div>
<div class="row">
<!-- Inside this row I was trying to create another list-form and its script -->*
</div>
</div>
</uib-accordion>
</script>
The solution was to create the list-form within the row and script at the same height as the previous one.
And simply call it up with the template-url from the list-form.
Thank you, everyone.

Find closest div with specified class

I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?

$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes

I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class

Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>

Can't seem to get element ID

I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>

Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});

should it not be alert($(this).id);? (Note the $).