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.
Related
I'm trying to capture using jQuery or Javascript the text value from parent classes in a site navigation
Example navigation:
Level 1 - bish
Level 2 - bash
if I click on Level 2 - 'bash' I'd like to capture level 1 text 'bish' into variable
An example of code I'm working with
`<li class="class1">
<a href="/bish" class="class2">
<div class="class3">
<p class="class4 level1">bish</p>
</div>
</a>
<ul class="class5">
<div class="class4">
<li class="class6">
<div class="class7">
bash
</div>
</li>
</ul>
</div>
</li>`
Id be grateful for any help.
I'm expecting that the value bish will output to a variable. The challenges I'm having is that because it's navigation the same class values are being used for other navigation.
For example:
$('.level2').click(function(e) {
e.preventDefault()
let level1 = $(this).closest('.class1').find('.level1').text();
console.log(level1);
});
I want to target only the 1st level tags inside a div. Here is my code:
<div class="main">
<span id="j_id0:j_id42">
<span>Customer Info</span>
</span>
<span id="j_id0:j_id4">
<span>Billing Address</span>
<div>Text</div>
</span>
<span id="j_id0:j_id61">
<span id="j_id4:22df">Shipping Address</span>
<div>Text</div>
</span>
Want to target all the span tags with dynamic ids and not the inner span tags. That is I want to add some specific css properties to all the 1st occurrence of each span tags(the one with ids) within the main div. Is this possible using css? If not how to do this using javascript?
Note that there may be other ids inside the inner span tags. Want to target only <span id="j_id0:j_id42"> , <span id="j_id0:j_id4">, <span id="j_id0:j_id61">. That is only the 1st occurrence of the spans inside main div.
The simplest one is to use >:
.main > span{}
Want to target all the span tags with dynamic ids
if we consider it then you can change it to:
.main span[id]{}
I want to add some specific css properties to all the 1st occurrence of each span tags(the one with ids) within the main div
Then you can use it:
.main span[id]:first-child{}
For your last edit:
Want to target only <span id="j_id0:j_id42"> , <span id="j_id0:j_id4">, <span id="j_id0:j_id61">.
.main span[id] span{}
.main span[id] span{color:red; font-weight:bold;}
<div class="main">
<span id="j_id0:j_id42">
<span>Customer Info</span>
</span>
<span id="j_id0:j_id4">
<span>Billing Address</span>
<div>Text</div>
</span>
<span id="j_id0:j_id61">
<span id-"id21">Shipping Address</span>
<div>Text</div>
</span>
</div>
You can use selector with attributes contain some word: Link
.main span[id~="j_id"] { ... }
you can try .main span[id^="j_id"] { ... }
For all span tags with dynamic ids:
.main > span or span[id^="j_id0:j_"]
For specific span tags with dynamic ids. k from 1..n
.main > span:nth-child(k)
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.)
Given the following HTML:
<div class="clearfix">
<a class="custom-checkbox"></a>
<span class="custom-checkbox-text">Text 1</span>
</div>
<div class="clearfix">
<a class="custom-checkbox active"></a>
<span class="custom-checkbox-text">Text 2</span>
</div>
<div class="clearfix">
<a class="custom-checkbox active"></a>
<span class="custom-checkbox-text">Text 3</span>
</div>
I would like a selector that return an array of text items where the sibling anchor link is of class "active". By way of example, I would like the query to return ["Text 2", "Text 3"] for the above HTML. I know I can do this using JavaScript and if/else but is there a "clever" way to do this using jQuery selectors?
You can use the Next Adjacent Selector along with .map() to create the desired array as below
var array = $('.custom-checkbox.active + .custom-checkbox-text').map(function(){
return $.trim($(this).text())
}).get()
Demo: Fiddle