We Keep Coding

How to get the Image "title" attribute value into another element using jQuery

I need to display the title value of the image (class name: media_image) in another p tag (class name: media_folder_title) for every row. But I can't able to get the value. I have attached the sample code here.
Screenshot:
HTML Code:
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
jQuery Code:
$(".media_folder img.media_image").each(function(){
var imgtitle = $(this).attr("title");
console.log(imgtitle);
setTimeout(function(){
console.log("settimout ok");
$(this).append("<p>"+imgtitle+"</p>");
}, 3000);
});

The problem is with the $(this) in the timeout because it's no longer the image but the window.
Also, append aims to append an element inside another element. It's not possible appending an element inside an image.
As your snippet implies, you want to append the p tag after the image, after is the right function for that.
$(".media_folder img.media_image").each(function() {
const $img = $(this);
const imgtitle = $img.attr("title");
setTimeout(function() {
$img.after("<p>" + imgtitle + "</p>");
}, 3000);
});
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Change the selectors in the first line into:
.media_folder img .media_image
Sometimes space is important.

Your problem is that you are trying to append something inside an img tag, which is not possible - as with a few other html elements.
What you are looking for is $.after()
Try $(this).after($('<p />').text(imgtitle))

I want to replace the text inside span of parent div

I want to change the text inside span. But span doesn't have a class and parent div doesn't have an id. I can't change the html it is not in my hand. So how can I change text of span with js?
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>

Something like this
let div = document.querySelector(".mobilMenuAcButton");
let span = div.querySelector("span");
span.innerHTML = "NEW MENU";
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>

Try using this for setting the text:
node.textContent = yourText
and this to return the value:
node.textContent

MDN Referance
let span = document.querySelector(".mobilMenuAcButton span");
span.textContent = "test";
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>

Here is an example by using jQuery.
//This can update the content of sample span
$(".mobilMenuAcButton span").html('New Menu');
//If you have multiple span in different level
//better use '>' or first() to specific select the target
//'>' standard for first level of children inside parent
//Both line below can do the works
$(".mobilMenuAcButton > span").html('New Menu');
$(".mobilMenuAcButton span").first().html('New Menu');
<!-- Insert the following line to head tag to use jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>

If you want to change multiple elements you can use querySelectorAll. Afterwards just loop over each element and change its content.
const menuSpans = document.querySelectorAll('.mobilMenuAcButton span, .mobilMenuBT span');
for(const span of menuSpans) {
span.textContent = 'MENÜ';
}
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
<div class="mobilMenuBT">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>

Get data from element without id or class

I am building a Chrome extension (and therefore can only use JavaScript) and I need to get the link that resides in the h2 with the heading2 class.
However, there are multiple h2 items with that class (not shown here), and I will not know what the link will point to, as it changes monthly.
In this example, the content of the header is "Think before you tweet". It will always be under another header that contains the words "Featured Topic."
What I am looking to get is the /think_before_you_tweet from the href= of that h2 item. It shows that I have already completed the topic underneath the h2, but that will not always be the case.
Here is the code for the website:
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>
I can use jQuery in my extension, but I do not have any back-end capabilities.

Use jQuery :contains selector:
$('h2.section_header:contains("Featured Topic") + article a')[0].href

Looks like you've gotta loop through the h2.section_header headers, see if the text matches whatever you want, and then grabs the link from the header following itself.
$('h2.section_header').each(function(index, element) {
var $element = $(element);
if ($element.text().match(/Featured Topic/i)) {
$('#result').html($element.next('article').find('h2.heading2 a').attr('href'));
}
});
#result {
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>

with jQuery's :contains selector use this:
jQuery('h2:contains("Featured Topic") ~ article h2.heading2 a').attr('href')
try at http://jsfiddle.net/ug01a0d2/
without jQuery try to bind to class "section_header" or use a cycle with the textContent check to iterate all "h2.section_header"

If there are multiple H2 class heading2 :
$('h2[class*="heading2"] a').each(function(){
var href = $(this).attr('href');
// Do what you want with this href
});

Use XPath! The syntax is pretty, uh, unfortunate, but it's very powerful:
var result = document.evaluate('//h2[#class="section_header"]/following-sibling::article//h2[#class="heading2"]/a', document, null, XPathResult.ANY_TYPE, null );
That should select that anchor node. I'm not sure if it's available to extensions, but Chrome defines a handy helper method called $x that eliminates all that boilerplate around the query.
More information: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

Need to get text of parent's div when child's div is clicked

Here when I am clicking on More Info. I want an alert showing the value present inside h3 tags. How can I do that ??
Here is the html i am working on
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3>
<p>fhjh</p>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>

so what you want is to click on the small-box-footer link and alert the 'Text 1'?
$(document).ready(function(){
$('.small-box-footer').on('click', function(evt){
//if you don't want the default event
evt.preventDefault();
//show the alert text
alert($('.inner h3').text());
})
})

you can try code below
$(document).ready(function(){
$('.small-box-footer').on('click', function(e){
e.preventDefault();
alert($(this).parents('.small-box').find('h3').text());
})
})
Working Demo

you can try :
$('.small-box-footer').click(function(e){
var text = $(this).prev().children().first().text();
console.log(text);
});

you need to have an event listener for the onclick event when someone clicks on the "more info".
you'll then need to get the closest query the dom (you can traverse upwards or alternatively go from the DOM straight to a specific element... it's cheaper to go up).
example...
Using Jquery
$('.small-box-footer').click(function(ev) {
ev.preventDefault();
// find the h3
var text = $('.inner h3').text();
alert(text);
});

Simple as just grabbing the h3 directly, skip traversing:
window.showTitle = function() {
alert($('h3').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3
<p>fhjh</p>
</div>
<a href="#" class="small-box-footer" onclick="showTitle()">More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>

get this anchor title text jQuery

I'm trying to get all anchor title text inside children div's
My HTML
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>blah1 blah1</div>"></a>
<a title="<div>blah2 blah2</div>"></a>
<a title="<div>blah3 blah3</div>"></a>
<a title="<div>blah4 blah4</div>"></a>
</div>
</div>
</div>
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>some text 1</div>"></a>
<a title="<div>some text 2</div>"></a>
<a title="<div>some text 3</div>"></a>
<a title="<div>some text 4</div>"></a>
</div>
</div>
</div>
My jQuery code
function openList()
{
var getTitletxt = $(this).find('a').attr("title");
console.log(getTitletxt);
}
I'm getting undefined in my console.log. Basically i'm trying to fetch text inside title div.

Don't use inline event handlers. You can use on for binding events.
HTML:
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>blah1 blah1</div>">a</a>
<a title="<div>blah2 blah2</div>">b</a>
<a title="<div>blah3 blah3</div>">c</a>
<a title="<div>blah4 blah4</div>">d</a>
</div>
</div>
</div>
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>some text 1</div>">aa</a>
<a title="<div>some text 2</div>">bb</a>
<a title="<div>some text 3</div>">cc</a>
<a title="<div>some text 4</div>">dd</a>
</div>
</div>
</div>
Javascript:
$('.myClass').on('click', 'a', function() {
alert($(this).attr('title'));
});
Demo: http://jsfiddle.net/tusharj/zfboe9o1/

Pass current object using this, by default this is not available of you bind handler use javascript inline handler. Your title is also not valid, you problably need on text that is not enclosed in div.
Live Demo
<div onClick="openList(this);">
function openList(obj)
{
var getTitletxt = $(obj).find('a').attr("title");
console.log(getTitletxt );
}
Change
<a title="<div>some text 1</div>"</a>
To
<a title="some text 1"> anchor 1 </a>
For custom tooltip class you can make css class, I took it from answer here.
Live demo with tool tip custom style
a.ac[title]:hover:after
{
}

First close your Tag.
<a title="<div>some text 1</div>"> </a>
Pass this as parameter in function
<div onClick="openList(this);">
function openList($this)
{
$($this).find('a').each(function(){ // To get all <a> tag title
var getTitletxt = $(this).attr("title");
console.log(getTitletxt );
});
}