Develop Reference

How to add jquery addClass() method to element ng-repeat AngularJS

I made a text editor summernote for an article, and after that I read it with modalbootstrap and angularJS ng-repeat in html element to get data from json api my php, its works.
but the problem with the article content is that there is an image and I want to add the 'img-fluid' class so that the image is responsive.
I have tried adding classes with the jquery addClass method to element html, and it works with code like this.
point assume example:
my script.js
$('img').addClass('img-fluid');
result element img without ng-repeat works.
<div class='container'>
<div class='onlyDiv'>
<p>
<img src='bla.jpg' class='img-fluid' <--works>
</p>
</div>
</div>
but if the img element with the ng-repeat directive doesn't work
results addClass() doesn't work.
<div class='container'>
<div class='divWithNgRepeat' ng-repeat='artcl.content | unsafe'>
<p>
<img src='bla.jpg' <--no class added>
</p>
</div>
</div>
please help me master, thanks

First, try change the "ng-repeate" to "ng-repeat". If that's not the problem, then the jQuery line may be running before than ng-repeat loop. In this case you need to use something like:
angular.element(document).ready(function () {
$('img').addClass('img-fluid');
});

yess bro , I have successfully solved the problem. as # symphonic's says jquery is more executed before the ng-repeat directive finishes loading the data. I tried the code below and it worked
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
$("#myModal").on('shown.bs.modal', function(){
$('img').addClass('img-fluid');
});
});

Is right to use getElementById(id) after change the DOM using jQuery?

In order to understand my question look at the following example code:
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>
$('#object') works always!
document.getElementById("object") will work if I change the DOM structure before?
$('#there').append( $('#object') );
document.getElementById("object") // will work?

Yes, it will work.
For getElementById to return DOM of element there is only need and that is Element should be on document it dosen't matter where it is.

It will work. See this code.
jQuery is not a language, it is just a JavaScript plugin and it make use of available functions in JavaScript.
console.log($('#object')[0]);
console.log(document.getElementById("object"));
$('#there').append( $('#object') );
console.log(document.getElementById("object"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="here">
<div id="object"></div>
</div>
<div id="there">
</div>

How to link to specific element on a differant page and execute jQuery script on it

Im trying to figure out if its possible to link to specific element on a page in such a way that it would trigger jQuery Toggle.
How the page is by default.
Links to an element and triggers slideToggle.
$(document).ready(function() {
$(".team-info").hide();
$(".list-element").click(function() {
$(this).next(".team-info").slideToggle(500);
});
});
Well... Hope it makes some sort of sense. Sorry if it doesnt, but Im very new to html5 and jQuery. Would appreciate any help.
Thanks :)

I think I have the problem solved by utilizing jquery and jquery-UI Libraries and calling the .accordion() method on the desired element. You may view the JSFiddle Here -- You may also view the code below.
In the HTML file I created one container that holds all of the sub-containers that make up the menu system
<div id="Dropdowns">
<h3>
Test 1
</h3>
<div>
<p>
This is test 1's content
</p>
</div>
<h3>
Test 2
</h3>
<div>
<p>
This is test 2's content
</p>
</div>
<h3>
Test 3
</h3>
<div>
<p>
This is test 3's content
</p>
</div>
</div>
In the JS file I wrote a few small lines that called the .accordion() method as mentioned.
$(function() {
$(document).ready(function (e) {
$("#Dropdowns").accordion();
});
});
If you want to modify the way that the dropdown menus look, don't include the CSS that comes with libraries and write your own :)

How to move one content div into another without rendering again?

I want to move my html content from one div into another BUT WITHOUT rendering it again!
When I use the jquery html() method it will be rendered fully again!
E.g.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#2').html($('#1').html())
</script>
will cause:
test
test
what I want is:
test

You can try using a combination of jQuery's .appendTo() and .clone() methods.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#1').children().clone().appendTo('#2');
</script>
Here's a JSFiddle to demonstrate. Take a look at the console, and you should see that "test" is only logged once. If you want to move the elements from #1 to #2 rather than copy them, you can just remove .clone() from the chain.
Hope this helps! Let me know if you have any questions.

<script>
$('#2').hide().html($('#1').html())
</script>

using 'appendTo()' in a div inside div

I was searching for this one for a couple of hours now but I couldn't find the exact same problem as mine:
I have the following code in my html:
<div id="list" style="display:none;">
<div id="insideList">
<!-- Some picture will go here -->
</div>
</div>
when I'm wrote in my JavaScript file:
$("<img src=\"images/somePicture.jpg\">").appendTo("#list");
it worked fine, however when I tried writing:
$("<img src=\"images/somePicture.jpg\">").appendTo("#insideList");
It showed nothing on the page. What am I missing here?
Edit: I'm calling $("#list").show(); eventually...

If you are gonna append to inside list, then try to set display:none for insideList and call insideList.show() instead of list.show();