I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
Related
I'm trying to get hold of the outer div's id from the innermost button element in the following HTML:
<div id="menu_level_0" class="menu_level">
<div class="editor">
<div class="ui_details">
<div class="dialog_buttons">
<button class="ui_btn" type="button">OK</button>
</div>
</div>
</div>
</div>
Dumping e.target from the button's event handler callback fn to the console returns the correct button element.
But why does calling
e.target.closest(".menu_level");
from the same callback give me null?
Try to console.log your e.target. It's probably another element, not your button.
// proof that, button.closest() works:
console.log(document.querySelector("button").closest('.menu_level'))
<div id="menu_level_0" class="menu_level">
<div class="editor">
<div class="ui_details">
<div class="dialog_buttons">
<!-- this in onclick="" is the button element -->
<button class="ui_btn" type="button" onclick="console.log(this.closest('.menu_level'))">OK</button>
</div>
</div>
</div>
</div>
I have a <div> which contains a <button>. When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div>. Also, the new <div> contains a <button>, which when clicked opens the old <div>. This will enable me to open one <div> at a time on click of the <button> present in those <div>. Can anyone tell me how to do this in AngularJS?
This picture shows my requirement
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
CodePen: https://codepen.io/RaymondAtivie/pen/OXYRyE
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
Using ngShow:
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>
http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')
Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")
Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();
I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.
Ok so i have dragged div with same id multiple time in other div, now i want to move this up and down onclick.
Is there any way to accomplish this using javascript.
never assign same id to different elements. it is not valid, id has to be unique.
if you must have all of them id-ed by '1' then rather assign all of them a class named '1' like this:
<div class="upDownDiv" id="stage" ondrop="drop(event)" ondragover="allowDrop(event)" style="text-align: center;display: table-cell;vertical-align:middle;">
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
<div class='1'>
<button style="margin-top:20px; margin-bottom:20px;">
Submit
</button>
</div>
</div>
to access all of the divs with class '1' later simply do a
var myDivs = document.getElementsByClassName('1');
and then iterate through them one by one and do your bidding.
or use jQuery and handle all of them same time.
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/