We Keep Coding

Returning data from images in order

I'm quite rusty with my (basic) javascript so hopefully I'm not misunderstanding the problem entirely, but essentially what I'm trying to do is return the 'alt' field of an image as a caption appended to the title for each image, and while I'm getting essentially that, it's returning the list for the entire sequence of images to each instead of their own in a sequence. Code is super simple, which is probably why it's not working. Any help is appreciated
$('#projectThumbs img').each(function(){
$('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
For example, if the images have a caption sequence of '1','2','3', each image is now being appended with '1,2,3' instead of '1' to 1, '2' to 2, etc.
Images structure from the html (in Squarespace so I don't have access to source code, only injection). This is in a grid of images.
ETA: noticed a few hiding divs in the code, maybe the project-item-count can be useful in some way?
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img alt='example'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
image of what's happening to help clarify

$('.project-image img').each(function(){
$(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example1'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example2'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>

Assuming the HTML contains valid #projectThumbs element, the problem is that you're not targeting the .project-title element(s) correctly.
You need to do that using parent() (to find the parent of the element), and then use siblings() to find the correct sibling (which has project-title class assigned).
See the demo below:
$('#projectThumbs img').each(function() {
$(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
<a class='project'>
<div>
<div class='project-image'>
<img alt='example'>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
</div>

The id attribute cannot be duplicated in DOM elements so each function is not run on all the same id elements if you use the class attribute with the same name and use each function then your problem solved.i hope it helps you.
$('#projectThumbs img').each(function(){
$('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="projectThumbs">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="mimage"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimag"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
</div>
<div class="project-title"></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

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 );
});
}

Retrieve child node from parent node

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?

If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');

getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>

Can you use jQuery?
It would be as easy as this

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?

You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>