what i need
i just need to show div.
code
<a href="javascript:void(0);" id="viewdetail" onclick="$(this).show();" style="color:green">view detail
<div class="speakers dis-non">
</div>
</a>
when I changed code to onclick="$('.speakers').show();" then its working fine.
problem occurs:
onclick="$(this).show()"
no div is shown.
i need when user click on particular anchor element then data should of that particular link click should be shown.
You have to target element using:
$(this).find('div').show();
Or to make it more specific with:
$(this).find('.speakers').show();
$(this) refers to the element you click on, in this case the a tag and not the div you want to show.
Try $(this).children('div').show();
This will show the div inside the anchor tag
$(this).children(".speakers").show();
You have to select first div element using:
$('this').children('div').show();
$(this) refers to the clicked anchor instead of the div. Use $(this).children('div.speakers').show(); to target div with speakers class inside the anchor.
<a href="javascript:void(0);" id="viewdetail"
onclick="$(this).children('div.speakers').show();"
style="color:green">view detail
<div class="speakers dis-non">
</div>
</a>
Working demo: http://jsfiddle.net/fw3sgc21/
Related
I've got problem with getting this text from href. I'm working on dom and I'd like to get text from this href:
<div class='xx'>
<a href='zz' class='button>
...
I was trying to do sth like that:
document.getElementById(".xx").getAttribute("href")
But it's not working properly
But it's not working properly
Because
you don't have an element with id attribute .xx,
.xx targets the div not the anchor
Also, your anchor tag's attribute class is not closed properly, also closing tag is not given either.
<div class='xx'>
<a href='zz' class='button'>Some text</a>
</div>
you have a class so use the class selector itself using querySelector
document.querySelector( ".xx .button" ).getAttribute( "href" )
or simply
document.querySelector( ".xx .button" ).href;
getElementById will grab an element by that ID. You have an anchor (malformed albeit) with not an ID but a class. Secondly you are targeting the parent div. You should be targeting the tag using querySelector() instead. Then to get the href you'd use href.
const href = document.querySelector('.xx .button').href;
console.log(href);
<div class='xx'>
<a href='zz' class='button'></a>
</div>
This works for me
document.getElementsByClassName("xx")[0].getElementsByTagName("a")[0].getAttribute("href")
The code below will get text from link:
var x = document.getElementsByClassName('xx')[0].getElementsByTagName("a")[0].getAttribute("href");
you can use id instead of class because class returns undefined value.and also you tried to get class using getby id
wrong:
document.getElementById(".xx").getAttribute("href")
function h()
{
alert(document.getElementById("button").href);
}
<a href='zz' id='button' onclick='h();'>
asd</a>
var yourhref = document.querySelector("div.xx a.button").href
yourhref holds your requested value. This is as precise as it gets using only the part of code you provided. If somewhere else on the page you have a div with class xx and a link with class button you are not gonna have a good time.
Solution - either have your targeted element or parent have UNIQUE id and then write a selection from there.
How do you use $(this) with a JS function and then find the attr?
function date_box() {
alert(this.getAttribute(week));
}
I want to get the attribute week from an element called gospel_table4. On click of gospel_table4, the function is triggered:
<a href='#'><div id='gospel_table4' week='$one_date' onclick='date_box()'> Week $one_date </div></a>
I can't do this:
$(this).click...
Because only one element of gospel_table4 is clickable. With the other method, all the elements of gospel_table4 are clickable.
Basicially, how do I get the attr from the function of date_box()?
You need a param inside your function
HTML:
<a href='#'><div id='gospel_table4' week='$one_date' onclick='date_box(this)'> Week $one_date </div></a>
Javascript:
function date_box(thisdiv){
alert($(thisdiv).attr("week"));
}
JAVASCRIPT
function date_box(that)
{
$attr=that.getAttribute('week');
alert($attr);
}
<a href='#'><div id='gospel_table4' week='$one_date' onclick='date_box(this)'> Week $one_date </div></a>
so the reason why click is not working is that div is inside anchor tag,
and anchor is clicked there are references like Anchor tag becomes non-working link in a div with float: right; or Is putting a div inside an anchor ever correct? which can give more details. So following is the code in jQuery()
$("#gospel_table4").parent("a").click(function(){
var week = $(this).children("#gospel_table4").attr("week");
console.log(week);
});
Explanation : Since we know that anchor is clicked first we place the click event listener on anchor tag . Then we can access the relative child element.
This will work but date_box() will also be invoked at the same time, I would recommend that you remove the onclick and and place it in side the above that way you would have more control over the code. Hope this is helpful.
I have several of these html blocks on a page in this structure
<div class="listing">
<h4>Some test Entry here</h4>
<div class="entry clearfix">
<a href="#" class="btn">
Text Here
</a>
</div>
</div>
I have the click event on the '.entry .btn' which is firing fine. But I want to get the inner text of the 'H4 a' within the same listing block as the btn I clicked. I have tried the following but just cannot seem to get the H4 text.
var getTitle = $(this).parents("h4").first();
alert(getTitle.html());
I have also tried closest() but still cannot get the H4? Any ideas?
closest & parents looks for ancestors. But, h4 is in another children of parent .listing.
Try:
var getTitle = $(this).closest('.listing').find("h4").first();
Firstly You need to traverse upwards in the DOM structure to identify the target element using .parent() or .parents() functions.
For your requirement you dont need the immediate parent hence .parent() is of no use instead you need to use .parents() to get all the ancestors in the DOM and refer the one with class selector .listing & finally traverse inward to find the target element h4.
JS CODE:
$('.btn').on('click',function(){
alert($(this).parents('.listing').find('h4').html());
});
Live Demo # JSFIDDLE
Happy Coding :)
use prev function in jquery
var getTitle = $(this).prev().find("h4").first();
alert(getTitle.html());
When using jquery-ui-1.8.15.custom.min toggle method, the element next to the target element is always hidden.
Here is the test page: http://jsfiddle.net/dassio/CLrMx/9
I want the div with class name suggestion to toggle between hidden and show when you click the button, but why the red line is always missing?
This should do the job:
http://jsfiddle.net/CLrMx/15/
Your script was accidentally hiding your text. Cleaned it up a bit so it olny does the necessary.
I found the problem:
<div id="config" class='name ui-widget-content ui-corner-all'>
<button id="details">show details</button>
</div>
I add the name class name to the parent div around the button, and when the event bubble up to the parent div, the following code:
$(".name" ).click(function() {
var clicked = $(this);
var suggestion = clicked.next();
suggestion.toggle("fold",200);
return false;
});
was called and toggle off the <h3> element which is the next element of the parent div.
<li class="menu-229 menuparent menu-path-front even">
<a title="About" href="/tca/">about</a>
<ul style="display: none; visibility: hidden;">
</li>
Above is an example of how my dynamaically generated dropdown menu is setup.
The ul is the dropdown menu with links, however I want to disable the About a tag from being clickable. I dont want parents of dropdown to be a link.
I tried:
$('.menuparent').click(function(e) {
e.preventDefault() // or return false;
});
but this code disables the dropdown menu links as well.
Sorry, forgot to mention this menu is generated by Drupal. I don't think I can touch it. I can only work with what I am given.
Try this selector with prev():
$('.menuparent > ul').prev('a').click(function(e) {
e.preventDefault();
});
A really simple approach would be to add a class to each of the parent items and use that exact code to target the parent class.
<a title="About" href="/tca/" onClick="javascript:return false;">about</a>
Would this do it?
With an anchor tag the onClick event is evaluated before the href is actually followed. If the onClick event returns a false the href is not activated.