<div class="A">
<svg> ... </svg>
<button>
<svg> ... </svg>
</button>
<svg> ... </svg>
</div>
<div class="A">
<svg> ... </svg>
<button>
<svg> ... </svg>
</button>
<svg> ... </svg>
</div>
I'm facing a challenge in extracting the svg element within the button tag of the second div. Any assistance with this would be greatly appreciated.
To locate the svg element within a button inside a div using xpath, specify svg as the element's name:
This will target the second svg element that is a child of a button element within a div.
(//div/button/*[name()='svg'])[2]
Alternatively, if you are utilizing CSS, you can utilize the following selector:
This will select the div as the second child and then find the svg element within a button.
div:nth-child(2)>button>svg
Give this xpath a try:
(//div/button)[2]/*[name()='svg']
Make sure to use parentheses so that you are selecting the second occurrence of //div/button on the current page.
For further information, refer to this answer:
If you're looking to select specific elements in your HTML document, consider using the querySelectorAll method.
// Use querySelectorAll to find all DIVs with class 'a'
const allDivsWithClassA = document.querySelectorAll(".a");
// Access the second element
const secondDiv = [...allDivsWithClassA][1];
// Find the svg wrapped by a button within this div
const svgWrappedByButton = secondDiv.querySelector("button > svg");
console.log(svgWrappedByButton);<div class="a">
<svg></svg>
<button>
<svg></svg>
</button>
<svg></svg>
</div>
<div class="a">
<svg></svg>
<button>
<svg></svg>
</button>
<svg></svg>
</div>If you want to target the second div, you will need to assign it an ID. The style will remain consistent through a class, but having the ID will simplify accessing the element. Here is one way to achieve this:
function fetchSVG(){
// Assuming you have given the second div an ID of 'myID'
var parentDiv = document.querySelector("#myID");
var svgElements = parentDiv.querySelectorAll("svg");
console.log(svgElements);
}My query is more about the procedure rather than a specific coding issue. I am working on a node application and using DHTMLX calendar. What I aim for is to have each user with their own set of events on their individual calendar. Currently, the implement ...
In my project, I'm facing a requirement where I need to fetch a value from server-side code using any event and utilize it to create a dialog box. Initially, I attempted to retrieve the value in window.onload but discovered that window.onload is trigg ...
While working with Typescript, I encountered an error related to mongoose. The issue arises from the fact that mongoose expects a promise of a mongoose document (in this case, the user's document) or "null" to be resolved during a search operation. Ho ...
As a newcomer to angularJs, I find myself facing an issue with two forms existing in different UI states (URLs) labeled as Step 1 and Step 2. The process requires filling up Step 1 and moving to the next step by clicking the NEXT button, which then leads t ...
I am attempting to substitute the %20, which signifies a space in the URL, with a different character. Router.map(function () { this.route('promos', { path: '/:promo_name', waitOn: function(){ return Meteor.subscribe( ...
I am working on a new feature that involves extracting blacklist terms from a JSON file using a service. @Injectable() export class BlacklistService { private readonly BLACKLIST_FOLDER = './assets/data/web-blacklist'; private readonly blackl ...
Obtaining JSON data (list of available Hotels within a certain distance) and extracting the following information in JSON format: Name of Hotels, Distance of Hotel from our current location, number of rooms. There might be multiple Hotels within the specif ...
I need to implement jQuery Validator in order to validate if a user's desired username is available during the sign-up process. The PHP script untaken.php is responsible for checking this, returning either ok if the username is free or taken if it is ...
I am currently working on a project using Reactjs (Nextjs) and I need to have different headers for the home page compared to the rest of the pages. I have created a "Layout.js" file where I have placed the header and footer components, and then imported ...
Imagine having an array filled with various option values, such as: var options = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grapefruit", "honeydew", "kiwi", "lemon", "mango", "nectarine", "orange", "pear", "quince", "raspberry", "strawbe ...
I need to populate my option fields with data retrieved from a database. I encountered an error in the console: Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found! I am confident that t ...
Hello, I am facing an issue while trying to import jQuery and THREEJS globally into my Vue.js cli project. Whenever I attempt to import them into my .vue file (like home.vue), I encounter the following error: 'import' and 'export' ma ...
I need help converting a JSON object to an XML String and I'm struggling to find the right method. I recently came across a jQuery plugin called json2xml on https://gist.github.com/c4milo/3738875 but unfortunately, it does not properly escape the data ...
Currently operating with node using [email protected] and [email protected]. Within my jade page, there exists a property like this: input(type='text',class='form-control', placeholder="Username", name='username', ...
I have been updating my file upload page to handle both text and excel files. However, when trying to read excel files with my current code, I am getting strange output. It seems that my function, which was originally designed for text files, needs modific ...
My array consists of objects with the following structure: $scope.SACCodes = [ {'code':'023', 'description':'Spread FTGs', 'group':'footings'}, {'code':'024', 'de ...
I am in need of some guidance with running a test to verify that a website can be accessed from the internet. I have put together this code, but I suspect it may be incorrect. Any suggestions or advice would be greatly appreciated. Thank you! va ...
Within my form, I have a single input text field that is required (ng-required="true") and a group of radio buttons (each with ng-model="House.window" and ng-required="!House.window"). Interestingly, I've discovered that if I select a radio button fir ...
As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...
When the number of students exceeds zero, the collapse should automatically open and the text in Typography (viewStudentList) will display 'Close'. On the other hand, if the student count is zero, the collapse should be closed and the text on Typ ...