Find parent() of control, then find("a") JQuery - javascript

I have a <td> that looks something like this:
<td class="myTDClass">
<span class="spanClass">Header</span>
<br />
<img class='myImages' style='cursor: hand;' onclick='doSomething(control)' alt='this is my alt Text'></img>
<br />
<span style="color: #123456;">More Text</span>
<br />
<a class='findThisClass'>Insert Alt Text Here</a>
</td>
This calls some jQuery code that sets the alt tag to some new text. Then, i want it to set the <a> element to some new text. Here is the jQuery code:
doSomething = function(control)
{
var $myControl = $(control);
$myControl.attr("alt", "This is the new Alt Text!");
var $newControl = $(control).parent().siblings().find(".findThisClass").first();
alert($newControl.find("a").text());
});
The jQuery code sets the alt tag great, but doesn't find the <a class=findThisClass />.
I think I'm using the .parent() and .siblings() wrong. Can anyone find my error? The idea here is that I can search just inside the <td> for the <a> element, and not touch the other elements in other <td>s

Try this instead:
var $newControl = $(control).closest('.myTDClass').find(".findThisClass");
alert($newControl.text());
Also img is self closing tag, instead of:
<img></img>
Just use:
<img... />
And instead of:
onclick='doSomething(control)'
Use:
onclick='doSomething(this)'
so that jQuery has really a control to work with :)
Working Example

Assuming you want to find the <a> that's in the same table cell as your <img>, you don't need to use parent(). All you need to do is call .siblings Try:
var $newControl = $(control).siblings('a.findThisClass').first();
This assumes control points to the image within the table cell.

$("a.findThisClass", $myControl).first()

a is a sibling of the image, so, simply:
$(control).siblings(".findThisClass")

Related

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')

tag next to a label in javascript

I do not have the luxury of using jQuery, I want to hide the span tag in certain conditions using Javascript and the span tag does not have an id.
"<label name="lcity" id="lcity" for="city" class="formLabel" title="City">City:</label>
<span class=spanclass>*</span>
I tried something like this and did not work:
var countyFieldLabel = document.getElementById('lcity').nextElementSibling;
countyFieldLabel.visibility="hidden";
Can anyone suggest something please?
Thanks
You almost go it right:-
Visibility is not an element attribute instead it is a style attribute.
use
countyFieldLabel.style.visibility="hidden";
Instead of
countyFieldLabel.visibility="hidden";
Fiddle
Use nextSibling instead of nextElementSibling:
function hideSpan()
{
var element = document.getElementById("lcity").nextSibling.style.visibility = 'hidden';
}
HTML:
<body onload="hideSpan()">
<label id="lcity" for="city" class="formLabel" title="City">City:</label><span class=spanclass>*</span>
</body>
In Addition, please remove your name attribute in label. It is not allowed.

Insert text after an <img> tag

I try to insert text after an <img> tag using javascript.
<div id="candy"><img src="candy.png" /> Insert text here!</div>
If I use document.getElementById('candy').innerHTML = "test"; the image disappears.
Can you help me?
That's because you're replacing the innerHTML with the text test. You're not appending the text.
Try:
var div = document.getElementById('candy');
div.innerHTML = div.innerHTML + 'test';
Taken from here.
Well, the img tag is part of the HTML inside the div, and if you replace the div's HTML you rewrite the img tag as well.
Perhaps you wanted something like this instead:
<div><img src="candy.png" /> <span id="candy">Insert text here!</span></div>
Use
var div = document.getElementById('candy');
div.insertAdjacentHTML('beforeend', 'test');
Reference: https://developer.mozilla.org/en/docs/DOM/element.insertAdjacentHTML
That is because you javascript changes the html inside the <img> tag to test. This doesn't work as <img /> is a self-closing tag.
I believe you could you jQuery to do what you are trying to however.

Show something that was hidden by default?

I have this code for a small jQuery game I'm making, and all the pictures (characters) are hidden by default. There's a question that says "Are you ready to play?" and a yes or no button. When you click the yes button, it hides the buttons and the text. It is also supposed to display the first image, which is #main. For some reason, it's not working.
Here's the jQuery code with the images under:
$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);
var main=$('#main');
batman=$('#batman');
car=$('#car');
hobo=$('#hobo');
cop=$('#cop');
knife=$('#knife');
gangfight=$('#gangfight');
ganggun=$('#ganggun');
gangknife=$('#gangknife');
blood=$('#blood');
document.write('<title>LOAUP</title>');
document.write('<center><h1>The life of an unlucky person</h1></center>');
document.write('<center id="start">Are you ready to play?</center>');
document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
$('#yes').click(function(){
$('#yes,#no').hide(function(){
$('#start').hide();
$('#main').show
});
});
$('#no').click(function(){
$('#yes,#no').hide();
$('#start').hide();
document.write('<center>Ok, come back another time then.</center>');
});
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
<img id='batman' src='/jquery/sprites/spriteBatman.png' />
<img id='car' src='/jquery/sprites/spriteCar.png' />
<img id='hobo' src='/jquery/sprites/spriteHobo.png' />
<img id='cop' src='/jquery/sprites/spriteCop.png' />
<img id='knife' src='/jquery/sprites/spriteKnife.png' />
<img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
<img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
<img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
<img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />
Edit:
Here's the example:
http://jsbin.com/ocowas/1
In your #main click function change
$('#main').show
to
$('#main').show();
Your variable list should be comma seperated not colon seperated. and you may also want to rename your variables to make them more obvious and easier to read/remember by prefixing with a $ sign. For example when you store a selector as a variable use
var $element = $('#element'),
$element2 = $('#element2'),
$element23 = $('#element23');
Further, the hide() function does not take negative numbers as you have used. Just use hide() for an instant hide, or hide(100) for fast, hide(2000) for slow.. check: http://docs.jquery.com/Effects/hide
To append html to your document without using document.write, you can store the html as a variable, then select the body tag, or any other tag and append/prepend or replace the html to that, for example.
$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);
The 'title' tag should only appear between the 'head' tags of your html document. Use a heading tag instead, 'h1' to 'h6'.
The html 'center' tag is also deprecated as far as I know. Try using 'span', 'p' or even 'div' instead.

Selectively getting text from <div>

<div class="myDiv">
<p>I need get<strong>this</strong>
<a title="And this" href="#">but not this</a>
</p>
<p>And also<strong>This</strong>
<a title="And this" href="#">but not this</a>
</p>
</div>
How do I grab everything in p tag except for the text in nested a tag. And also I need to get values for "title" attirbute for tag a?
Using http://api.jquery.com/replaceWith/
Creates a clone
Replaces the a tags with their title attributes
Calls text() on the cloned node
http://jsfiddle.net/mendesjuan/cBejv/2/
var clone = $('.myDiv p').clone();
clone.find('a').replaceWith(function() {
return this.getAttribute('title');
})
console.log(clone.text());
Outputs
I need get this
And this And also This
And this
How about this:
$('.myDiv a').text('');
$('.myDiv p').each(function() {
console.log($(this).text()+$('a',this).attr('title'));
});
jsFiddle example.
Something like this would work. There may be a much better way to do this, but this was the first thing to come to mind.
var $clone = $('.myDiv').clone();
$clone.find('a').remove();
$('#output').append($clone.text());​
Make sure you add an element with id="output" to see the results.

Categories