$('div.jsn-bootstrap3').removeClass('jsn-bootstrap3').filter(function () {
return $.trim(this.className.replace('jsn-bootstrap3', '')) == ''
}).contents().unwrap();
I use the above to detect if there is a class jsn-bootstrap3 it will unwrap the child content and delete the div with that class but what I have in my next example is a div with multiple classes all starting with col-
<div class="col-md-12 col-sm-12 col-xs-12">
I think that id I use $('[class*="col-"]') it would find the above div but how would I be able to delete it and just keep its content?
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="http://placekitten.com/g/200/300">
</div>
Would become
<img src="http://placekitten.com/g/200/300">
You can just apply the same logic to your [class*="col-"] selector as you have to your other selector:
$('[class*="col-"]').contents().unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="http://placekitten.com/g/200/300">
</div>
Related
I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).
You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB
<div class="col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
I want to select the first Div which has as child element the balise with this specific data-product-id 10496.
I can't use Css because there are also 2 others div with the same classes.
Thank you
Add a nice recognizable class to that parent. Say product
Use Attribute selector [] to find the desired element by data-*
use .closest()
If found - assign a class like "is-hidden" to .product using Element.classList and the .add() Method:
const prID = "10496";
const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);
if (EL_prID) {
EL_prID.closest('.product').classList.add('is-hidden');
}
.is-hidden { display:none; }
<div class="product col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
Parent Class inddetails-wrapper clearfix has two divs which as further classes having same name.
I want to select first class col-md-6 nopadding. How should I do that ?
Below is the code:
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
You can use :first-child:
.inddetails-wrapper div:first-child .col-md-6 {
background: #f00;
}
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
as this question was tagged under jquery You can select the first element inside <div class="inddetails-wrapper clearfix"> using Jquery like this:
var firstChild = $( ".inddetails-wrapper.clearfix div" ).first();
and you can play with firstChild using more jquery properties depending upon what do you need.
I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out
As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();
I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...
<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>
Clicking a button is supposed to color all the elements of class "grid_element" into red but in never happens.
function ColorMe() {
document.getElementsByClassName("grid_element").style.color = ("red");
}
The problem is said to be Cannot set property 'color' of undefined
at ColorMe (js.js:2) but I know it worked in the same way many times before.
The problem is that you are attempting to use the .style property on the collection of elements found by .getElementsByClassName() instead of on each of the elements within the collection.
Also (FYI), .getElementsByClassName() returns a "live" node list, which causes the entire DOM to be re-scanned every time you access the node list variable and that can impact performance quite a bit. There are limited use cases for that, so you probably want a "static" node list more often than not. For that, use .querySelectorAll().
function ColorMe() {
// Get all the matching elements into a JavaScript Array
var elements = Array.prototype.slice.call(document.querySelectorAll(".grid_element"));
// Loop over each element....
elements.forEach(function(el){
el.style.color = "red"; // Adjust the element's style
});
}
<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>