We Keep Coding

Select button elements based on appearing text in the browser

(EDIT:
I forgot to ask to not use jQuery)
I'm trying to select html buttons based on their displayed text, not their class or id.
All the button have the same dom structure and classes. Like follow and unfollow buttons in the folowing example:
<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
<span class="button-text following-text">
Following
</span>
<span class="button-text unfollow-text">
Unfollow
</span>
</button>
The closest solution I found is based on the dom structure like getElementsByClassName, getElementById and :contains(), but I can't figure it out.
EDIT2:
The solution in jQuery would be $('span:hidden:contains(Follow)').parent();
but I'm searching for a solution without jquery.

Try with the below code, you can style accordingly
$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );

you can give id's to spans as follows:
<span id="follow" class="button-text following-text">
Following
</span>
<span id="unfollow" class="button-text unfollow-text">
Unfollow
</span>
and then by using the below code in javascript, you can check their status
if(document.getElementById("follow").innerHTML=="Following"){
//follow
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow
}

I found a way to do it with :hidden but this is jQuery and thus not useful in my case.
$('span:hidden:contains(Follow)').parent();
The best thing I found now is to get all buttons first and then use a condition (takes 2 steps, but working).
var buttons=document.getElementsByClassName('...');
//loop...
if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
//buttons[i]
}
If you find a better solution it's still welcome :-)

How to append just before the end of the BODY tag using JQuery [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.

Try:
$("#region_North_America").append(row_str);
using append().

Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.

Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Changing text after a <br> with jquery

I have a span tag like this and stored in the variable "foo"
<span class="right margin">
سی ئی 1500
<br>
Nicole Kidman
</span>
Using jQuery OR javascript, how can I change the "Nicole Kidman" clause with something I want? innerHTML changes everything in the <span>
Edit: I edited the text with this code foo[0].lastChild.nodeValue="something else"; but is there another way doing that using only jQuery?

I recommend you add another span tag around Nicole Kidman.
<span class="right margin">
سی ئی 1500
<br>
<span>Nicole Kidman</span>
</span>
and change the text like this:
$(".right").find("span").text("something you want");

<span> is an inline element. We avoid using <br/> in them.
It is also advisable to use another tag to encapsulate your 'Nicole Kidman' text.(Like another <span>)
I'm not aware of your entire HTML structure so I'm going with what you have posted. Here is a fiddle example for how it can be done.

Here the foo is not a jQuery object:
foo.lastChild.textContent='something you want'
So the foo is a jQuery object, but you still need to access the dom element directly:
foo.contents().eq(-1).textContent='something you want'

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>

It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')

First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>

The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.

Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')

You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>

Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>

As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')

(jQuery) How do I find the first link which has a specific class?

If I have a link somewhere (not predetermined) down the tree like this:
<div id="foo">
<div>
<div>
link
link
link
link
</div>
</div>
</div>
How would I go about selecting the first link with the class "specialLink" using .find()?
My non working guess is:
$("#foo").find(".specialLink a:first")

Just use one combined selector, like this:
$("#foo a.specialLink:first")
Or like your original:
$("#foo").find("a.specialLink:first")
Previously it was looking for the first <a> that was a descendant of a .specialLink, rather than the same element.

Your selector would be:
$("#foo").find("a.specialLink:first");
Better yet, save a few function calls by using:
$("$foo a.specialLink:first");

.specialLink is the a itself. With a (space) :first you will be looking for childeren of .specialLink.
$("#foo").find("a.specialLink:first")