So I am trying to traverse through multiple elements and I seem to be having a problem. I have 2 divs that have two child elements each - an input and a link. Inside the link there is also an image. When I click on the input button of the first div, I want to be able to traverse to it's sibling(the link{a tag}) and into the links child(the img tag) and get its source attribute which I will then use to change the image of the second div. Here's an excerpt of the code
HTML:
<div id="item">
<img src="img/deli/1.jpg" alt="Owl Image" id="homeimage">
<input type="submit" id="btn1" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/1.jpg" );'>
</div>
<div class="item">
<img src="img/deli/2.jpg" alt="Owl Image" id="homeimage">
<input type="submit" id="btn" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/2.jpg" );'>
</div>
JQUERY:
$(document).ready(function(e){
$('input#btn1').on('click', function(){
var changeThis = $('input#btn1').siblings('#yeezy').children('img').attr('src');
$("#homeimage").attr("img", changeThis);
})
});
Thank you in advance
IDs must be unique. ID selector only selects the first matching element in the document. You are getting/setting src attribute of one element, i.e. both $('input#btn1').siblings('#yeezy').children('img') and $("#homeimage") refer to the same element.
Either use different IDs or use class attributes. Also note that since IDs must be unique, $('input#btn1').siblings('#yeezy') doesn't make a lot of sense. You could simply select the element using an ID selector: $('#yeezy');
There are a few things off with your code. You use the id "homeimage" twice, but there should only ever be one of a given id. You have the onclick attributes set to a different function besides the one you want to run, so you should remove those. Finally, when you try to change the src attribute of the homeimage, you call the function on the img attr: ("img", changeThis);
Make sure that all of your ID's are unique, remove any onclick atrributes from your elements, and then replace:
$("#homeimage").attr("img", changeThis);
with:
$('#homeimage').attr('src', changeThis);
Related
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'));
});
This question already has answers here:
jQuery click function only works on first element
(8 answers)
Closed 8 years ago.
I have a div containing other div elements which all contain an anchor tag that runs a javascrip function (uses AJAX to delete a row from a table). Example;
<div id="container">
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
<div><a id="btn" onclick="SomeFunction()">Delete</a></div>
... and so on
</div>
I then have this Jquery code;
$("#btn").click(function() {
$(this).parent("div").fadeOut();
});
that should fade out each of the elements on click to my knowledge, but it's only fading out the first element, if i click the next elements button's nothing happens.
I don't have extensive JQuery knowledge to understand why this is happening.
Ids must be unique, use classes instead.
Ids
[...] elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
classes
Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method
Reference
Example
HTML:
<div id="container">
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
<div><a class="btn" onclick="SomeFunction()">Delete</a></div>
</div>
jQuery:
$(".btn").click(function() // Identify classes by a dot and the class attribute value.
{
$(this).parent("div").fadeOut();
});
Working Demo
Offtopic: I recommend taking a look at .on().
You can only have one element on a page with the same id. jQuery is getting confused. Use class or attribute selectors instead.
I am trying to select those input fields on page to validate which are visible on layout. I am able to find out this through one way but with another way its not actually working. What I am getting is my selector is working for direct child but not for grand children.
I want to select only those elements ids which are actually visible on layout to validate them as they should not be blank.
Jsfiddle Demo
HTML
<div id="createdDiv1">
<div id="row11">
<div class="hide">
<input type="text" class="blk" id="inp_11"/>
</div>
</div>
<div id="row12">
<div>
<input type="text" class="blk" id="inp_12" />
</div>
</div>
</div>
<div id="createdDiv2">
<div id="row21" class="hide">
<div>
<input type="text" class="blk" id="inp_21" />
</div>
</div>
<div id="row22" class="">
<div>
<input type="text" class="blk" id="inp_22" />
</div>
</div>
</div>
<button onclick="subCheck('#createdDiv1 :visible')">check 1st</button>
<button onclick="subCheck('#createdDiv2 :visible')">check 2nd</button>
JavaScript
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk').each(function(){
ids.push($(this).attr('id'));
});
console.log(ids);
}
CSS
.hide{
display:none;
}
Note: I don't want to change my subCheck() function since its generalized for all valiations, what I need to know how can I make it work with :visible selector or something similar to it to work with multi-levels checks for visible elements.
Sorry If I am making it ambiguous for you. I am not sure what exactly to explain in words.
use :not to exclude the class .hide:
<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Z4PSV/1/
Although I wouldn't suggest using onclick at all though, instead:
<button class="subcheck" data-id="createdDiv1">check 1st</button>
<button class="subcheck" data-id="createdDiv2">check 2nd</button>
<script>
$(document).on('click', '.subcheck' function() {
//Creates string as: '#createdDiv1 .inputDiv:not('hide')
var ft = "#" + $(this).data('id') + " .inputDiv:not('.hide')";
subCheck( ft );
});
</script>
Fiddle: http://jsfiddle.net/kY8Wh/
Lastly, if you were wishing to implement your :visible then:
<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Zgm78/
Would be sufficient too.
The issue is that you scan all the inner .blk elements of a visibile top element using each, in this case the element itself is visible, but hidden from the middle parent.
I know you won't change your subCheck function, bu you can simply solve the issue by checking there the visibility of the child element .blk.
Visibile selector take care of the effective visibility of the element (direct or nested):
Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.
Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout.
Elements that are not in a document are considered to be hidden;
jQuery does not have a way to know if they will be visible when
appended to a document since it depends on the applicable styles.
I think that this change will not break anything in your code.
Code:
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk:visible').each(function(){
ids.push($(this).attr('id'));
});
//console.log(ids);
alert(ids);
}
Demo: http://jsfiddle.net/IrvinDominin/her4Y/
I'm calling on multiple buttons to show up but it seems that only one button shows up. Please tell me why. I've tried adding a in the body with a class but that seems to screw up the button that's already hidden.
This form basically shows a button when the url contains iphone
Example: http://jsfiddle.net/SDq4P/35/show/#iPhone
Here's the JSFiddle: http://jsfiddle.net/SDq4P/35/
I need all three buttons to show at one time. All three buttons contain iphone but only one shows up.
<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" />
<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" />
<div id="linkdiv" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false" />
Try to make use of class instead of IDs. HTML ID is supposed to be unique and your sample HTML has three DIV elements with the same ID. If you are using jQuery like $('#linkDiv') and do something, only the first element is selected.
Use <div ...></div> instead. I don't think you can end divs using the XHTML />. If you check in Chrome Dev Tools the buttons are nested into each other.
It's because your css is targeting a class called "select." Just add the class to the divs and they will show up. Your id's also need to be unique. Here's a fix that should work:
<div class="select" id="linkdiv1" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>
<div class="select" id="linkdiv2" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>
<div class="select" id="linkdiv3" href="phone-condition" onclick="location.href = $(this).attr('href')+'?/1234/#iPhone';return false"></div>
see it in action:
http://jsfiddle.net/mHU84/
I have some HTML code that looks like this:
<tr id="nbContent_GR1">...</tr>
<tr id="nbContent_GR2">...</tr>
<tr id="nbContent_GR3">...</tr>
<tr id="nbContent_GR4">...</tr>
<tr id="nbContent_GR5">...</tr>
<tr id="nbContent_GR6">...</tr>
Within one of the rows, I want to traverse up the DOM to find the closest element that has an ID attribute that starts with "nbContent_GR". So basically I want to be able to find the parent TR element without knowing its exact ID, just the first one that starts with "nbContent_GR". Is this possible? If so, how would I go about it?
BTW, I'm aware of the closest() and "contains" selectors, just not sure if contains can be used on attribute values or not.
Just do:
tr = $(this).closest("[id^='nbContent_GR']");
that will traverse the DOM up until it finds a parent with ID starting with 'nbContent_GR'
.closest('[id^="nbContent_GR"]')
Two useful pages to look at:
http://api.jquery.com/closest/
http://api.jquery.com/attribute-starts-with-selector/
I think you can combine these for a solution.
From within the TR, find the closest TR. Then use the 'starts with' selector to find an ID which starts with your required value.
E.g.:
$(this).closest("tr").parent().find("id^='nbContent_GR'");
This may be late but for those of you who like me want it a bit different way, I figured out this way.
$(document).on('click', '.btn-info', function() {
var cardId = $(this).closest(".cardClass").attr("id");
alert(cardId);
console.log(cardId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div id="card1" class="cardClass">
<button type="button" class="btn btn-info"></button>
</div>
<div id="card2" class="cardClass">
<button type="button" class="btn btn-info"></button>
</div>
<div id="card3" class="cardClass">
<button type="button" class="btn btn-info"></button>
</div>
<div id="cardn" class="cardClass">
<button type="button" class="btn btn-info"></button>
</div>
</div>