This is my HTML:
<p class="first">blah blah <a href="" class="more">read more</a></p>
<div class="read_more"&开发者_开发知识库gt;
<p>more text</p>
</div>
And javascript:
$(document).ready(function(){
$('a.more').click(function(){
$(this).find('.read_more').slideDown();
return false;
});
});
Doesn't seem to do anything (read_more is set to display: none) any ideas?
Try this:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().next().find('.read_more').slideDown();
return false;
});
});
Update:
Here is the demo :)
Code:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parents().find('.read_more').slideDown('slow');
return false;
});
});
You could also do:
$(document).ready(function(){
$('a.more').click(function(){
$('.read_more').slideDown('slow');
return false;
});
});
Or this:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().next().slideDown('slow');
return false;
});
});
.find(..)
looks for the selector inside the current element.
What you might want is
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().parent().find('.read_more').slideDown();
return false;
});
});
Edit
Added another .parent()
as the <a>
is inside <p>
and .read_more
is not in the <p>
One potential cause of find() not being able to work is that the element you are looking for hasn't loaded when you call it.
In my case, I was replacing a text field with an editor plugin, and the editor had not loaded by the time I called find().
If you can't find the element when you know you should be able to, try setTimeout to add a delay before calling find().
Note: setTimeout is not a good solution for this issue, it just helps diagnose the problem. Try to come up with a way to wait until the element has loaded before you make your find() call.
You are trying to find .read_more under a tag in which it does not exist by replacing the this with document it may work
精彩评论