Develop Reference

How to find element based on data-attribute with this existing JS code example?

I want to target a specified div, but my example for now is only when it has an id.
I want to use pure Javascript
current:
<div id="my_id">hello</div>
<script>
document.getElementById('my_id').insertAdjacentHTML('beforebegin',
'<h3>text</h3>');
</script>
my case:
<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>
How can I target the div that has the bar data-foo attribute ?

You can do this using an attribute selector alongside querySelector:
document.querySelector("div[data-foo='bar']").insertAdjacentHTML('beforebegin',
'<h3>text</h3>');
<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>

targeting classes with jquery

Need to pass information from one class to another in a way that will validate. Current approach is a mess- works but does not validate.
I need to pass text inside a p tag to another element on the page. Right now i'm using a tag attributes to pass this info along. Super messy.
<div class="element-item">
<div class="text-panel">
<div class="text-cell">
<a class="ajax" href="ajax/bkdesks.html" id="Brooklyn Desks" dir="BROOKLYN, NY">
<p class="link"><img src="img/chainlink.png" width="60" height="60" alt="link" alt=""/></p>
<p class="name">Brooklyn Desks</p>
<p class="dir">Brooklyn, NY</p>
</a>
</div>
</div>
And then jQuery:
$('.ajax').click(function(e) {
e.preventDefault();
$('#projects-head .titlehead').text($(this).attr('id'));
$('#projects-head .subhead').text($(this).attr('dir'));
$('#project').load($(this).attr('href'));
});
titlehead and subhead are the other elements on the page whose content is being replaced. I would much rather grab the contents of the p tags below than put everything in the a id & dir. But i cant figure out the jquery to target them.

The p.name and p.dir elements are descendant elements of the clicked .ajax element so you can use .find()
$('.ajax').click(function (e) {
e.preventDefault();var $this = $(this);
$('#projects-head .titlehead').text($(this).find('.name').html());
$('#projects-head .subhead').text($(this).find('.dir').html());
$('#project').load($(this).attr('href'));
});

jquery to get href in anchor tag using div/span ID selector and anchor tag class

Hi I'm new to jquery I just wanted to seek some help on getting the href attr in anchor tag using div/span ID selector and anchor tag class
<span id="view-post-btn">View Member</span>
<div id="preview-action">
<a class="preview button" href="https://blog.company.com/site1/archives/team/post-1" target="wp-preview" id="post-preview">Preview Changes</a>
Thanks :)

try
$('#view-post-btn').find('a').attr('href');
$('#preview-action').find('a').attr('href');

try this.
$('#view-post-btn').find('a.button').attr('href');
$('#preview-action').find('a.preview').attr('href');

How to select certain class in jQuery

Here's the problem; I have a couple of divs like the one below, same class name, no id. I need to modify the <span> text below the <h4> tag, based on where's the mouse cursor on those 3 images. I do this using javascript, by using mouseenter() method. The problem is that the method changes every span text from whole web page, not only from the class with class name "parent" where the mouse cursor is at the moment.
<div class="parent">
<div class="parent.child">
<div class="parent.chil.child">
<div class="parent.chil.child.child">
<img src ="link1" data-price="a">
<img src ="link2" data-price="b">
<img src ="link3" data-price="c">
</div>
</div>
</div>
<h4>
text
</h4>
<p><span class = "spanClassName">text to be changed</span>some text</p>
<div class=child1"></div>
</div>
How do I select only the link where's the mouse, from the curent "parent" div, even if there are several div with same class name, "parent".
I hope I was understood, if not, please ask and I try to explain more.

You can use .closest() to find parent with .parent class
$('.parent\\.chil\\.child\\.child img').on('hover', function(){
$(this).closest('.parent').find('.spanClassName').text($(this).attr('data-price'))
});
DEMO
Additionally as per documents you need to escape . in your selectors
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

If you already know the specific parent node, just use parent.find('.spanClassName'). If you don't have the parent node, but you know which link the mouse is on, you can use link.closest('.parent').find('.spanClassName').

how can the value of an href attribute be changed using javascript/css?

Assuming that the html contains the following structure:
<div>
text
</div>
<div>
<div>
//<script> or <style> must go here
</div>
</div>
...and assuming that the 'contribution' to the final HTML file can be inserted ONLY at the specified location, and assuming that the markup for the "a" element cannot be modified in any way, is it possible to add javascript or css code that will change the url that the href attribute of the previous "a" element refers to? If so, how?

You could do it without id:
document.querySelector("a[href^='http://the']")
and set the href prop:
document.querySelector("a[href^='http://the']").href=whatever
For a full reference (browser-compatibility) of querySelector see the MDN-Article

Put an id on it, e.g.
<a id="the_a_tag" href="...">...</a>
^^^^^^^^^^^^^^
then the JS is simply
document.getElementById('the_a_tag').href = 'new address goes here';
as long as you put the javascript AFTER the relevant HTML.
And note: CSS is for presentation only. With a few exceptions, it cannot affect the content of document elements, merely how they appear (color/size/position/etc...).

Give the link an id
<a href='...' id='linkToChange'>text</a>
And then access it in your script:
document.getElementById('linkToChange').href='newAddress';

You can do this using something like this:
document.getElementById("abc").href="xyz.php";
You will need to set an ID for the tag, so your tag will look like this:
<div>
text
</div>
<div>
<div>
//<script> or <style> must go here
</div>
</div>