I'm trying to figure out a way to get the value of a div class and then use that value in another div by appending it somehow.
So say I click on product-item small below. I want item 1 to display in the p class of "added-item"
https://jsfiddle.net/jmy8fqqx/
<span class="product-item small">item 1</span>
<span class="product-item medium">item 2</span>
<span class="product-item big">item 3</span>
<div class="bought">
<p class="added-item">
<!-- content will be loaded using jQuery - according to the selected item -->
</p>
</div>
Jquery
$( ".purchase" ).click(function() {
});
This should work for you. Please next time give some code you have tried.
$( ".purchase" ).click(function() {
var item = $(this).find('span').html();
$('p.added-item').html(item);
});
Related
I'm trying to find out the solution how to get the target of Add New from Prod2 from the code below.
To get this target at first I have to click on ptv-icon ptv-collapse-icon. This is possible using XPATH but each time when I run the script xpath is changing.
Does it possible to use any method to localize Add New directly.
Another problem is that: Add New element is only visible after I will click on ptv-icon ptv-collapse-icon.
<li class="ptv-listitem" data-id="1">
<div class="ptv-item">
<span class="ptv-icon ptv-expand-icon"></span>
<span class="ptv-text">
<span class="tree-text">Prod1</span>
<span class="tree-counts"></span>
</span>
</div>
</li>
<li class="ptv-listitem" data-id="2">
<div class="ptv-item">
<span class="ptv-icon ptv-collapse-icon"></span>
<span class="ptv-text ptv-selected">
<span class="tree-text">Prod2</span>
<span class="tree-counts"></span>
</span>
</div>
<ul class="ptv-list ptx-expanded">
<li class="ptv-listitem" data-id="-1">
<div class="ptv-item">
<span class="ptv-text">
<span class="tree-text">**Add New**</span>
<span class="tree-counts"></span>
</span>
</div>
</li>
</ul>
</li
(Assuming you're using Java) You should try using xpath with text which would never be change as below :-
//to click on prod2
driver.findElement(By.xpath(".//li[contains(.,'Prod2')]//span[#class = 'ptv-icon ptv-expand-icon']").click();
//to click on add new
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.xpath(".//li[contains(.,'Add New')]"))).click();
You can select the element by the 2 classes of ul and one class of the span:
WebDriver.findElement(By.cssSelector("ul.ptv-list.ptx-expanded span.tree-text")).click()
This means select a span element having tree-text class, which is inside an ul elemenent having both ptv-list and ptx-expanded classes.
I am trying to create a headline news feed for my home page by using the Jquery .load function.
I am loading the page news.html and I can target the first elements (the latest news stories).
$( "#headline" ).load( "news.html .media-left:first, .media-body:first", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
but what I can't figure out is how to only pick up the div and the first two paragraphs within that div, so that I can create a read more button to take them to the main news.html, every time I try to reference a portion of the paragraphs, it only includes the paragraph and doesn't include the div media.body which has the styles attached to it.
<div class="media menu-center">
<div class="media-left">
<div class="donut-yellow">
<h4>
<span class="month">May</span>
<span class="day">23rd</span>
</h4>
</div>
</div>
<div class="media-body media-right ">
<p class="media-heading"><strong>e </strong></p>
<p>Welcome to the brand new ****!</p><p>To ensure that we continue to(...)</p>
<p>Take a look around the new layout and make sure to keep an eye on this(...)</p>
<span class="pull-right"><p class="bg-success"><strong>Paul</strong></p></span>
</div>
</div>
This selector seems to work:
$( "#headline" ).load( "news.html .media-body>p:nth-child(-n+2)", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
I've tested it in this Fiddle.
It returns:
e
Welcome to the brand new ****!
I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/
See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});
You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);
I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.
I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.
My example:
<ul>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<span class="label studio-art">studio art</span>
<span class="label ceramics">ceramics</span>
</div>
</div>
</div>
</li>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
<div class="row-section">
<div class="row-heading">ceramics</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
</div>
</li>
</ul>
If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:
$(document).ready(function(){
$("span.label.studio-art").click(function(){
$(".row-section.studio-art").toggle();
});
$("span.label.ceramics").click(function(){
$(".row-section.ceramics").toggle();
});
});
Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/
But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.
So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.
Thank you for any help in advance.
You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.
$(document).ready(function(){
$(".row-section span").click(function(){
var clickedText = $(this).text();
$(".row-section").filter(function(){
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
Updated fiddle: http://jsfiddle.net/6qLX7/2/
.filter documentation: http://api.jquery.com/filter/
I didn't test this, but it should work.
$(document).ready(function(){
$("span.label").click(function(){
var checkText = $(this).html();
$( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
// This checks for exact match. If you want any "containing" match, remove the if-clause
if($(element).html() == checkText) {
$(element).toggle();
}
});
});
});
Let me know if this helps. P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)
Ok, lets see if I can explain this clearly enough here.
My HTML looks like
<li>
<div class="info_left" rel="snack">Fries</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="lunch">Burger</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
<li>
<div class="info_left" rel="4thmeal">Taco</div>
<div class="info_right">
<span class="info_remove">[Remove]</span>
<span class="info_favorite">[Favorite]</span>
</div>
</li>
If you will note you will see a "Remove" and "Favorite" inside a div "info_right". What I need to do when either one of those 2 options is clicked on is get the rel and text values of the same li's "info_left" div. I've tried a few ways but don't think I'm nailing the combo between parent(s), siblings correctly or I dunno. Either way hoping someone can toss me a bone.
It should just be:
$('.info_remove,.info_favorite').on('click', function() {
var $left = $(this).parent().siblings('.info_left');
var rel = $left.attr('rel');
var txt = $left.text();
...
});
jsFiddle example
$(document).ready(function(){
$(".info_right span").click(function(){
$("#msg").html($(this).attr("class")+": "+$(this).parent().prev().attr("rel"));
})
})
try this
$('.info_remove,.info_favorite').click(function() {
var target_elem = $(this).parent().prev();
alert(target_elem.attr('rel'));
alert(target_elem.text());
});
fiddle : http://jsfiddle.net/ss37P/1/