I'm trying to access text from an other div only by classes and with JQuery. I'm always struggling with JQuery because I'm not that familiar with it but for the most times i can get it to work somehow.
I tried something like this:
$(function() {
$(".quote_button").click(
function () {
var text = $(this).parent('.openticket_footer').prev('.openticket_warper').find('.answer_message').text();
alert(text);
}
);});
And many other ways but i cant figure it out.
The easiest way to show you what i want to do is by this picture:
Quote function
I want to click on the class="quote_button"button to access the text in class="answer_message"
Here the html code:
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
if($result["uID"]==$result_answer["uID"]){
echo '<p style="font-size: 8pt">Ersteller</p>';
}
echo '<p><strong>'. $result_answer["uName"] .' '. $result_answer["Firstname"] .'</strong></p>
<p style="font-size: 10pt">'. $result_answer["pName"] .'</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">'. $result_answer["Message"] .'</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
Thank You!
Try this : Get parent using parent method, move to previous div and then find answer_message to get the text
$(function() {
$(".quote_button").click(function () {
var $parent = $(this).parent('.openticket_footer').prev('.openticket_warper');
var text = $parent.find('.answer_message').text();
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
<p style="font-size: 10pt">Name of the candidate</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">Text Message is here</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
$(document).on('click', '.quote_button', function(){
alert($(this).parents('.openticket_warper').find('.answer_message').text());
});
Related
Solved :)
var test = $('textarea[name=extract]').val();
var hh = $.parseHTML(test) ;
$.each($(test).find('.tile__link'),function(i,b){
var reff = $(this).attr('href');
$('.links').append("link/" +reff + "<br><br>");
})
I have HTML code copied from an website. And I want all href values with the class .tile_link in a String.
I did not find an solution, how I can get the value of href with the class .tile_link without the divs and text just the link?
Here's an example:
var test = $('textarea[name=extract]').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="extract">
<span class="txt-raise">8min</span>
</div></div>
<div class="js-hunq-badge fit-tr pr-- pt--"></div>
<div class="tile__footprint">
</div>
</a>
</div><div class="tile grid-tile tile--bordered"> <a href="#/profile//grid" class="tile__link">
<div role="image" aria-label="HSHBerl" style="background-image:url()" class="tile__image"></div>
<div class="bg-raise tile__info">
<div class="info info--middle txt-raise">
<div class="txt-truncate layout-item--consume">
<div class="typo-small lh-heading txt-truncate">
8 km <span class="icon icon-small icon-gps-needle icon-badge"></span>
</div>
<div class="lh-heading txt-truncate">
<div class="info__main-data">
<div class="info__username">
</div>
<div class="js-romeo-badge"></div>
<div class="info__icon-set">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile__onlinestate js-online-state"><div>
<span class="icon icon-online-status ui-status--online icon-raise" title="Online"></span>
</textarea>
But I don't know how to extract it to get only the values of href.
You can do someting like this:
$(".tile_link").attr('href');
If you have more than one element with that class, you can do forEach or map.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Example:
$('.tile_link').map(function (element) { return $(this).attr('href'); });
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
I have the following: A bunch of button div's which each have unique info
<div class="button">
<div id="first">
Johny
</div>
<div id="second">
Dog
</div>
<div id="third">
Pasta
</div>
</div>
<div class="button">
<div id="first">
Bob
</div>
<div id="second">
Cat
</div>
<div id="third">
Noodles
</div>
</div>
.
.
.
I'm trying to make it so that when one of these buttons is clicked, i can check the values of the inner divs.
For instance
$('.button').on('click', function () {
// Check to see if the text of the 'first' div is
// johnny or bob or something else
});
First of all you cannot use same id for multiple elements in a page.So,Instead use class for that.Ex:
<div class="button">
<div class="first">
Johny
</div>
<div class="second">
Dog
</div>
<div class="third">
Pasta
</div>
</div>
<div class="button">
<div class="first">
Bob
</div>
<div class="second">
Cat
</div>
<div class="third">
Noodles
</div>
</div>
Now in the javascript:
$('.button').on('click', function () {
var first=this.getElementsByClassName("first")[0];//gets first element of this button
var second=this.getElementsByClassName("second")[0];
var third=this.getElementsByClassName("third")[0];
//Now you do what ever you want
});
Try $(this).children(":first").text() to get fist div's text
<script>
$('.button').on('click', function () {
if ($(this).find("#first").html().trim() == "Johny") {
console.log("The first div is Johny");
} else if ($(this).find("#first").html().trim() == "Bob") {
console.log("The first div is Bob");
}
});
</script>
How about giving each div its own click handler? (you will need unique ids for this to work properly)
<script type="text/javascript">
var bchildren = $('.button').children();
$(bchildren).click(function() {
console.log($(this).html());
});
}
</script>
I want to use jQuery to open and close a div.
But because the code that I use is dynamic and will be repeated below each other, I need to use a dynamic id.
HTML:
<div class="categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>" style="display: none;">
<p>Text</p>
</div>
<span class="showcategoryratings" id="review-<?php echo $this->htmlEscape($_review->getId())?>">
<span class="showcategoryratings-text">Per category</span>
</span>
I try to use this jQuery, but I guess the php line is not working:
$(document).ready(function() {
$('#review-<?php echo $this->htmlEscape($_review->getId())?>').click(function() {
$('.categoryratings-review-<?php echo $this->htmlEscape($_review->getId())?>').slideToggle("fast");
$(this).toggleClass('active');
});
});
How do I need to edit this correctly?
You can do it without PHP in your Javascript.
$(document).ready(function() {
$('.showcategoryratings').click(function() {
var categoryId = $(this).attr('id').split('-')[1];
$('.categoryratings-review-'+categoryId).slideToggle("fast");
$(this).toggleClass('active');
});
});
I think it works.
It'd be easier if you'd grouped your elements like below. By doing so, you don't need IDs at all. Take a look.
$(document).ready(function() {
$('.showcategoryratings').on("click", function() {
$(this).closest(".group").find(".categoryratings-review").slideToggle("fast");
$(this).toggleClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text1</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category1</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text2</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category2</span>
</span>
</div>
<div class="group">
<div class="categoryratings-review" style="display: none;">
<p>Text3</p>
</div>
<span class="showcategoryratings">
<span class="showcategoryratings-text">Per category3</span>
</span>
</div>
you can hook up all id's that start with review- to respond
$('[id^="review-"]').click(function() {
$( '.categoryratings-' + $(this).attr('id') ).slideToggle('fast') ;
$( this ).toggleClass('active');
});
I have a jQuery countdown script that goes like this:
<script type="text/javascript">
$(document).ready(function () {
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span>%-d</span> day%!d '
+ '<span>%H</span> hours '
+ '<span>%M</span> minutes '
+ '<span>%S</span> seconds'));
});
});
</script>
And the HTML code like this:
<div class="timer">
<div class="days-wrapper">
<span class="days"></span> <br>days
</div>
<div class="hours-wrapper">
<span class="hours"></span> <br>hours
</div>
<div class="minutes-wrapper">
<span class="minutes"></span> <br>minutes
</div>
<div class="seconds-wrapper">
<span class="seconds"></span> <br>seconds
</div>
</div>
What I'm trying to do is basically put the countdown inside the HTML code. I tried to do it like this:
+ '<div class="hours-wrapper"><span class="hours">%H</span> <br></div>'
But that didn't work. What am I doing wrong?
Here is my fiddle:
http://jsfiddle.net/nmmevtht/
Without knowing the script, based on what it is doing
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").text(event.strftime("%-d"));
$(".hours").text(event.strftime("%H"));
$(".minutes").text(event.strftime("%M"));
$(".seconds").text(event.strftime("%S"));
});
And since you updated the question with your a fiddle, here it is running
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").text(event.strftime("%-d"));
$(".hours").text(event.strftime("%H"));
$(".minutes").text(event.strftime("%M"));
$(".seconds").text(event.strftime("%S"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>
<div id="getting-started"></div>
<p></p>
<div class="timer">
<div class="days-wrapper">
<span class="days"></span> <br>days
</div>
<div class="hours-wrapper">
<span class="hours"></span> <br>hours
</div>
<div class="minutes-wrapper">
<span class="minutes"></span> <br>minutes
</div>
<div class="seconds-wrapper">
<span class="seconds"></span> <br>seconds
</div>
</div>
Just target the span with the class name you want to add it to and pass each increment to it
$('#getting-started').countdown('2015/01/15').on('update.countdown', function(event) {
$(".days").html(event.strftime('%-d'));
$(".hours").html(event.strftime('%H'));
$(".minutes").html(event.strftime('%M'));
$(".seconds").html(event.strftime('%S'));
});
FIDDLE