I have to find a class content on click.
Following my HTML code
<div class="row team">
<div class="col-md-3">
<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">
<img src="img/team/Martin-Duff.png" class="img-responsive" />
</a>
<div class="content">
<p>paragaraph </p>
<p>paragaraph paragaraph </p>
<div class="details">
<!-- content for details div -->
</div>
</div>
By clicking on an image I need to get the HTML for details div. How do I get it?
I tried
$('.team .img-responsive').on('click',function(){
var content= $(this).closest('div.content').html();
console.log(content);
})
But this gives me undefined. Need your help with this.
Thanks!
closest selects the closest matching parent element (if any). The target element is the next sibling of the clicked element's parent. For selecting the target element, you can use the parent and next methods:
var content = $(this).parent().next('div.content').html();
div.content is a sibling of the parent of the img-responsive. You can find the related element by going up to the closest row and then finding the nested element. Not using next() makes it slightly less reliant on the markup layout.
var content= $(this).closest('.row').find('div.content').html();
Related
There are 10 items. I need to click on the hidden element (item-icon) in the item_9. The hidden element appear after hovering on him. I have the same situation and the same code operate as expected. But in this situation code operate as unexpected and get Error in the console.
How can I click on the item-icon element in the item_9 element?
html:
<div class="item">
<div class="w">item_1</div>
<div class="d">
<div style="display:none" class="item-icon" role="button" tabindex="-1">
button1
</div>
<div style="display:none" class="item-icon">
button2
</div>
</div>
</div>
<div class="item">
<div class="w">item_2</div>
<div class="d">...</div>
</div>
...
<div class=""><div class="item">
<div class="w">item_10</div>
<div class="d">...</div>
</div></div>
js:
let findItems = await driver.findElements(By.className("item"));
let items = findItems.map(async elem => await elem.getText());
let allItems = await Promise.all(items);
await driver.findElement(By.xpath(`//div[#class='item'][9]//div[#class='item-icon'][2]`)).click();
Console Error:
{ NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//div[#class='item'][9]//div[#class='item-icon'][2]"}
Please try using JavascriptExecutor to click on hidden elements.
Sample code in Java:
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();", element);
If the element exists, but you get the error 'NoSuchElementError', it means that the element you are trying to find in the code exists inside an 'iframe' tag in the webpage.
e.g.
<iframe id="iframeID">
<div class="item">
<div class="w">item_2</div>
<div class="d">...</div>
</div>
...
</iframe>
What you need to do is to switch to that iframe, then find the element with class name "item".
driver.switchTo().frame("iframeNameOrID"); //you can use name or id for that iframe
//OR driver.switchTo().frame(0); the zero is the first iframe, you can use 1 for 2nd and so on...
let findItems = await driver.findElements(By.className("item"));
driver.switchTo().defaultContent(); //switch back to the main webpage
//...
I assume that you have seen the code before hovering over it, and the code given by you is also valid if you don't hover over the element. I am answering according to the provided data :-)
IF THERE IS NO IFRAME...
Hover using selenium
Start the page and without hovering, use Chrome DevTools to select that area which should be hovered. This will show you the element which you need to hover. You can perform a element.click() on that element, which will then execute the java script to create your desired element "item".
I hope this will help... Leave questions in the comments :-)
I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.
This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!
Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}
I'm trying to do something similar to How to hide an element, based on its text, with JavaScript? and Hiding a parent element using JS/JQuery based on the alt tag of a child element
but it's a bit more complicated than that. Here's the entire element (a list item containing lots of stuff) I want to hide:
<li>
<div class="wrapper">
<div class="fulllink" data-href="hideme/some/url" data-title="hideme - some more text">
<a href="/some/url" rel="stuff">
</div>
<div id="fullimage" class="theimage">
<img src="/some/url" title="hideme - some more text" alt="thisis/hideme text">
</div>
<div class="captionwrapper">
<div class="caption">
<p>
<a class="" title="" href="hideme/some/url">more text</a>
</p>
</div>
</div>
</div>
</li>
I want to hide this li element based on the specific content "hideme", which appears several times, but as you can see never on its own. It should be hidden as the page loads, so no user action required.
I've tried to come up with a solution based on similar questions on stackoverflow, but so far unsuccessfully.
You can use the html() function to get the html contents of each li and then search if it contains the desired text: "hideme".
$("li").each(function () {
if ($(this).html().indexOf('hideme') > -1) {
$(this).hide();
}
});
Demo
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
So... On click, I want the button with a class "clicker" to get, through JQuery, the element with the class "popup-box". The structure I have below appears several times throughout the page, and that's my problem... I want the "clicker" to target only the "popup-box" that comes after him.
My structure is as follows (this is repeated several times):
<div class="item-papers">
<div class="img-wrap">
<div class="img-innerwrap">
</div>
</div>
<div class="floater">
<span></span>
<div class="item-papers-content">
<span></span>
<span></span>
<div>
<span></span>
<div class="popup-box"></div>
</div>
</div>
</div>
</div>
I've messed around with .sibblings(), .parents(), .find(), but I can't, for my life, figure out how to reach it.
Any help is really appreciated.
Thank you
Well, their closest common parent is the .item-papers element.
So go upwards from the clicked element with .closest('.item-papers') and then downwards with .find('.popup-box') to get the popup element..
$('.clicker').on('click', function(e){
e.preventDefault();
var self = $(this),
popup = self.closest('.item-papers').find('.popup-box');
// do what you want with the popup element here..
});