jQuery last child selector - javascript

This is not working and I don't know why. I have tried it in the console it works, but when I change my js codes it does not work.
$('#recipe-table td:last-child').width();
How can I get it the correct way?
this is the html
<div id="div-lists">
<div id="div-recipe-table">
<table class="" id="recipe-table" cellspacing="0" cellpadding="0">
<tbody>
<tr class="recipe-list" data-ng-repeat="recipe in recipe_data" ng-click="recipe_click(recipe.CodeListe,recipe.Name)">
<td id="td-img{{recipe.CodeListe}}">
<center>
<span id="img{{recipe.ID}}X">
<a id="{{recipe.ID}}" href="javascript:void(0);">
<img ng-if="recipe.Pictures !==''" fallback-src="images/default.png" ng-src="{{recipe.Pictures}}" class="images" id="img{{recipe.ID}}"/><img ng-if="recipe.Pictures===''" class="images" src="images/default.png" id="img1"/>
</a>
</span>
</center>
</td>
<!-- I want to get The width of this <td> -->
<td class="recipes">
<div id="div-recipe-name">
<strong>{{recipe.Name}}</strong></div>
</td>
<!-- Until here
I already tried using $('.recipes').width(); but it returns 0 -->
</tr>
</tbody>
</table>
</div>
<div id="div-list-loading"></div>
<div id="div-list-noresults">{{ui_translation.UIT[171610]}}</div>
</div>
</div>

Try the following:
$('#recipe-table td:last').width();
From the jQuery Docs
While :last matches only a single element, :last-child can match more
than one: one for each parent.
Since you have already tried $('.recipes').width(); does the following provide you any results:
$('.recipes').each(function (index, elem) {
alert($(this).width());
});

Try below jQuery
You can use .last() method constructs a new jQuery object from the last element in that set.
$('#recipe-table td').last().width();
JSFIDDLE DEMO

Related

jQuery Issue cannot retrieve or set attributes, 'undefined'

I have an img element. That image element, on mouse hover, will display a detailed tool tip.
I'm trying to make the img element default start empty null, and feed it the image information from the tooltip on load.
I can't retrieve or assign attributes though using $('idName').attr(a,b);
html and js below:
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td><img id="primary" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('primary_tool_tip').style='display:block'"
onmouseleave="document.getElementById('primary_tool_tip').style='display:none'">
<div id="primary_tool_tip" class="bottom" style="display:none">
<img id="tooltip_img" src="../images/sword01.jpg" />
<div id="tooltip_name">Bronze Sword</div>
<div id="tooltip_equipslots">Primary, Secondary</div>
<div id="tooltip_attributes">STR+2 DEX+2</div>
<div id="tooltip_elements">Fire+5</div>
</div>
</td>
<td id="secondary"><img class="img-responsive" src="" alt="Secondary"></td>
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
alert($("tooltip_img").attr("src"));
function initialize(){
$('primary').prop('src', $('tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );
Place all of your JavaScript in a JQuery document.ready() function so that it doesn't execute until after the DOM has been loaded and is ready to be interacted with.
Then, make sure that you are using correct selectors.
Tag Name gets elements by the element name.
Prepending # gets elements by ID
Prepending . gets elements by class name
So all together:
// The contents of an anonymous function that is passed to JQuery
// won't run until the DOM is parsed and ready to be interacted with.
// This is also known as a "document.ready()" function.
$(function(){
alert($("#tooltip_img").attr("src"));
function initialize(){
$('#primary').prop('src', $('#tooltip_img').attr('src') );
}
window.addEventListener("load", initialize, false );
});
You need to $("#primary") to target element by id.
in your case : $("primary") will try to find an HTML element named <primary>
I fiddled around with what Scott gave me made some minor adjustments and everything works now =).
My img is now instantiated from information contained inside my tooltip's bundle of information. Which will eventually be supplied itself from js, and js will supply it through xml externally if things go accordingly.
Thanks for help Scott and company, final refined code below:
Final code
HTML
<div class="col-sm-6 text-left">
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td>
<img id="primaryIcon" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('tooltip_primary').style='display:block'"
onmouseleave="document.getElementById('tooltip_primary').style='display:none'">
<div id="tooltip_primary" class="standardtooltip">
<img id="tooltip_primary_img" src="../images/sword01.jpg" />
<div id="tooltip_primary_name">Bronze Sword</div>
<div id="tooltip_primary_equipslots">Primary, Secondary</div>
<div id="tooltip_primary_attributes">STR+2 DEX+2</div>
<div id="tooltip_primary_elements">Fire+5</div>
</div>
</td>
<!--
<td>
<img id="secondaryIcon" class="img-responsive" src="../images/sword01.jpg" alt="Secondary"
onmouseover="document.getElementById('tooltip_secondary').style='display:block'"
onmouseleave="document.getElementById('tooltip_secondary').style='display:none'">
<div id="tooltip_secondary" class="tooltip" style="display:none">
<img id="tooltip_secondary_img" src="../images/sword01.jpg" />
<div id="tooltip_secondary_name">Bronze Sword</div>
<div id="tooltip_secondary_equipslots">Primary, Secondary</div>
<div id="tooltip_secondary_attributes">STR+2 DEX+2</div>
<div id="tooltip_secondary_elements">Fire+5</div>
</div>
</td>
-->
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>
JS
$(function(){
initialize();
});
function initialize(){
document.getElementById("primaryIcon")
.setAttribute("src", $("#tooltip_primary_img").attr("src"));
alert('working as intended!');
}

jQuery actions independent of id

I have a working web page, but I would like to generalize the code. When one clicks a link with e.g. anchor #11 or #12, a div called #t11 or #t12 will open (or close) with this piece of script:
Script
$( "#11" ).click(function() {
$( "#t11" ).toggle();
});
$( "#12" ).click(function() {
$( "#t12" ).toggle();
});
Stripped HTML
<div class="a">
<table>
<tr><td><a id="11">Foo</a></td></tr>
<tr><td>Find out more about Foo</td></tr>
</table>
</div>
<div class="a">
<table>
<tr><td><a id="12">Bar</a></td></tr>
<tr><td>Find out more about Bar</td></tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
Relevant CSS
.b {
display: none;
}
This is fine, however, with over 20 divs it's getting complicated and difficult to maintain. Is there a way to reduce the code, so every id in <a> will toggle its <div>? I've been struggling with $this but without the result I hoped for.
You can use a selector that will match all appropriate <a> elements, so that your click function will be applied to all of them. Then, you can get the id attribute from your <a> tag using $(this).attr('id'). You can then form a selector that matches the corresponding id of the content you want to toggle, then call the .toggle() method using that selector.
$('.a table tr td a').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
EDIT
You may also consider adding a class to your actual <a> tags, as mentioned by #Lelio Faieta.
In the above example, if the structure of your html changes, the $('.a table tr td a') selector will break, and the click functionality will be lost.
If, however, you assign a class of, say toggler to each <a> tag, then you can just replace the $('.a table tr td a') selector with $('.toggler') and your click functionality will still work if you change the location of your <a> tags in your html.
$('.toggler').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11" class="toggler">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12" class="toggler">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
You can use classes to group elements in jquery.
A class is referenced like id but with a dot instead of a dash:
$('.someClass')
where you used to write
$('#anID')
Many objects can share the same class so you can both use classes to target an animation to multiple objects at the same time or to use different element on the DOM to fire an animation
The best way to solve this is by adding a common class to all a tag and performing event with that class.
<a class="atag" id="11">
<a class="atag" id="12">
$(".atag").click(function() {
var id=$(this).attr("id");
$(body).find("#"+id).toggle();
});

How to show different images using .hover() jQuery

I'm gonna try to explain my issue:
I have span elements, each span element have text, when the user hovers it, it should displays an image next to the element, each image is different, I was trying to use jQuery .hover() function, but when I hover on the text it shows me the whole images.
How can I solve it?.
My HTML.
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="">
<img class="displayed" src="images/test2.jpg" alt="">
</div>
My Code.
$(".displayImage").hover(function(){
$(".displayed").show();
}, function () {
$(".displayed").hide();
});
Thanks!.
You could associate the span with a particular image via a data attribute and id.
$(".displayImage").hover(function(){
// $(this).attr('data-img') == 'azotea' or 'nivel8'
// so we end up with $('#azotea').show(), for example.
$('#' + $(this).attr('data-img')).show();
}, function () {
$('#' + $(this).attr('data-img')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage" data-img='azotea'>Azotea </span>
<span class="displayImage" data-img='nivel8'>Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="images/azotea-n9.jpg" alt="azotea" id="azotea">
<img class="displayed" src="images/test2.jpg" alt="nivel 8" id="nivel8">
</div>
I try don´t change your html
https://jsfiddle.net/luarmr/hjreda3r/
I add a little css as well for hide the elements from the origin
$(".displayImage").hover(
function(el){
var image = $(this).data('ref');
$(".displayed:nth-child(" + image + ")").show();
}, function () {
$(".displayed").hide();
}
);
I would suggest you to better use css3 instead of jquery, cos jquery slows down productivity of your site on mobile gadgets, so maybe you should look here enter link description here
You need to find common ground between your span & image and without adding anything extra in your markup, that would be the index value of each of them. Obviously, this solution that I recommend below is entirely dependant on the order with which you lay out your HTML.
Take a look at this solution I posted for a similar problem.
So basically, your code should become something like this:
$(".displayed").hide();
$(".displayImage").hover(function(){
$(".displayed").eq($(this).index()).show();
},function(){
$(".displayed").eq($(this).index()).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 20%;" class="text-center">
<span class="displayImage">Azotea </span>
<span class="displayImage">Nivel 8 </span>
</td>
</tr>
</tbody>
</table>
<div class="col-lg-5 text-left">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" alt="">
<img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" alt="">
</div>
Hope it helps in some way.
T

Unable to get element in javascript

I have the following HTML data on a website which I am trying to manipulate using an extension in Google Chrome:
<div id="lvl-2">
<div class="loading" style="display: none;"><div class="loading-text"><div class="nowloading">Loading…</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list"></div>
</div> <!-- dirs -->
<div class="tunes"><table>
<tbody>
<tr></tr>
...
<tr></tr>
</tbody></table>
</div>
</div>
I am using the following code to get the table element somehow:
var div1 = document.getElementById("lvl-2");
var divChild1 = div1.children;
var divChild2 = divChild1[1].children;
var tables = divChild2[1].children;
But on executing the line where the tables variable is assigned, I am getting this error:
Cannot read property 'children' of undefined.
I am not sure why am I getting this error, as second child of the divChild2 variable should contain the table as a child. What do you suggest I should do?
Ultimately, my aim is to randomize all the rows in the table. If there is another way I can do that, I would welcome it.
P.S. 1: I am a Javascript noob, I think it is abundantly clear.
P.S. 2: Apologies for the weird HTML. I had to remove a lot of useless tags in between the relevant tags. Otherwise the HTML would have gotten huge.
Your HTML is invalid, you are not closing the .loading div and some others. So your DOM is absolutely not the way you expect it to be.
That is why all those stupid people always tell you to indent your code properly. Might be easier to catch problems like this. Validation is also a good way to find problems like this.
This is how your HTML looks after running it through a beautifier (which you could do too before asking a question next time):
<div id="lvl-2">
<div class="loading" style="display: none;">
<div class="loading-text">
<div class="nowloading">
Loading…
</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list">
</div>
</div>
<!-- dirs -->
<div class="tunes">
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
Obviously this is not what you expected. I fixed it for you:
<div id="lvl-2">
<div class="loading" style="display: none;">
<div class="loading-text">
<div class="nowloading">
Loading…
</div>
</div>
</div>
<div class="content">
<div class="dirs">
<form class="search">
<input type="text">
</form>
<div class="dirs-list">
</div>
</div>
<!-- dirs -->
<div class="tunes">
<table>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
And with the fixed HTML, your code works.
In your webpage, there are other elements that you don't know. Each text (including line breaks, tabs and spaces) between tags is a TextNode, which is a Node in the DOM document.
var div1 = document.getElementById("lvl-2");
// divChild1 is a TextNode representing the line break and the tab
// between <div id="lvl-2"> and <div class="loading"
var divChild1 = div1.children;
// A textNode doesn't have a children attribute, so divChild2 is undefined
var divChild2 = divChild1[1].children;
// Error
var tables = divChild2[1].children;
To solve it, you can try using "firstElementChild" and "nextElementSibling", that only refers to "true" Nodes (assuming you try to get the "tunes" div. I haven't tested it but it should work) :
var div1 = document.getElementById("lvl-2");
var divChild1 = div1.firstElementChild;
var divChild2 = divChild1.nextElementSibling;
var tables = divChild2.nextElementSibling;

how to show and hide inner divs onclick upto 3 levels?

I have following structure in my page
HTML:
<div style="position:relative; width:200px; height:100px; overflow:hidden;">
<div style="position:absolute;" id="innerDiv">
<table style="width:400px;height:50px;" border="1" id="innerTable">
<tr>
<td>
<div id="td1"class="monthDiv" style="white-space:nowrap;">
2000
</div>
<div id="td2" style="white-space:nowrap;">
<table>
<tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
</table>
</div>
</td>
<td>
<div id="w" style="white-space:nowrap;">
2001
</div>
</td>
</tr>
</table>
</div>
</div>
JAVASCRIPT:
$("#td1").click(function(){
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(){
$("#td2").hide('slow');
$("#td1").show('slow');
});
$("#quarter1").click(function(){
});
$("#quarter2").click(function(){
});
So, when I click on 'td1'(2000) I am showing 'td2'(JAN-JUN00 AND JUL-DEC00)' and viceversa but I need to show another div(JAN00 FEB00 ... JUN00) when click on 'quarter1'. Also I need to find on which div click event was fired, 'quarter1' or 'quarter2' to show (JUL00 AUG00 ... DEC00)
Please help me.
You can simply call a show event on the div you want to display on click of quarter1:
$("#quarter1").click(function(){
alert('quarter1');
$('#quart1').show('slow');
});
$("#quarter2").click(function(){
alert('quarter2');
$('#quart2').show('slow');
});
quart1 and quart2 are the ids of the divs you want to display.
EDIT:
Add this:
$("#td1").click(function(e){
e.stopPropagation();
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(e){
e.stopPropagation();
$("#td2").hide('slow');
$("#td1").show('slow');
});

Categories