I am trying to get access to the nearest table element from the Image HTML Element. I used siblings but it returns multiple tables since there are other tables at the same DOM level. I can access it using $(this).next().next() syntax but I do not want to do that.
Here is the screenshot. I am trying to access
This jQuery statement will do the trick:
$("img").nextUntil("table").last().next();
You can just keep iterating nextElementSibling until you find a table element:
// `img` is a reference to the image element
var table = img;
while(
(table = table.nextElementSibling)
&& table.tagName.toLowerCase() != 'table'
);
// Use `table` here. It will be `null` if no table is found
Related
i need to get data attribute from html
I am trying to get like this
Elements element = document.select("div.highlight padding standard-box");
result+= element.attr("data-highlight-embed");
But result is empty, should be data-highlight-embed = content
html-code
<div class="highlight padding standard-box" data-link-tracking-page="Matchpage"
data-link-tracking-column="[Main content]" data-link-tracking-destination="Click on highlight [button]"
data-highlight-embed="content">text</div>
You need to change your CSS query and notice that the select() method return multiple elements.
Update the CSS query to
Elements element = document.select("div.highlight.padding.standard-box");
Then you can loop the result
for(Element el : element) {
System.out.println(el.attr("data-highlight-embed"));
}
Or you can get the first element
System.out.println(element.first().attr("data-highlight-embed"));
To get the data attributes you also can reference how to use dataset() method at https://simplesolution.dev/java-jsoup-extract-custom-data-attributes-html5-element/
As the API document declared:
If an element selected this way is inserted into a single location
elsewhere in the DOM, it will be moved into the target (not cloned).
Important: If there is more than one target element, however, cloned
copies of the inserted element will be created for each target except
for the last one.
var div = $("<div></div>").addClass("divCells"),
tdName = $("<td></td>").addClass("tdName"),
tdAge = $("<td></td>").addClass("tdAge"),
tdGender = $("<td></td>").addClass("tdGender"),
tds = [tdName, tdAge, tdGender],
tr = $("<tr></tr>"),
tbody = $("#peopleList tbody");
tds.append(div);
tr.append(tdName).append(tdAge).append(tdTimetdGenderstamp);
tbody.append(tr);
As above code represents, I try to include the 3 tds in to an Array, so that I could append div into all of them, but it is not working.
You're trying to use jQuery .append on a vanilla JavaScript Array. .append only works on jQuery/DOM elements, not JavaScript types such as Arrays.
Your tds array contains jQuery/DOM elements, but the Array itself isn't 'appendable' in the manner you're attempting.
Using an Array, you'll have to iterate through your array, and manually append the div to each element in it. Furthermore, since you will be appending to 3 separate elements individually (i.e. 1 per iteration, not all 3 at the same time) you'll have to manually .clone the div yourself, otherwise you'll just be appending the one div to the 1st item in the Array, and then moving the same div to the 2nd, and again to the 3rd. So...
// tds.append(div); // Change this to...
for (var i=0; i< tds.length; i++) {
tds[i].append(div.clone())
}
OR...
You could forget about using the Array altogether, and have jQuery clone and append the div for you (as your original question implied). Here's how...
// Remove the following lines...
// tds = [tdName, tdAge, tdGender],
// tds.append(div);
// Then, after you add the td's to your row here...
tr.append(tdName).append(tdAge).append(tdGender);
// ...have jQuery find all the td's and clone+append your div to them in one hit:
tr.find('td').append(div)
I would like to use jQuery to insert an html element inside another element and at a particular position.
I've found a way I can do it in Javascript but was wondering if there's a shorter 'one line of code' way of doing it in jQuery.
var container = document.getElementById("container");
container.insertBefore( html, container.children[0] );
Many thanks in advance
Use the selector for the n-th child of a given kind and the before method (assuming your new content comes in html) :
$("#container > div:nth-of-type(42)").before(html);
If you want to insert a new element as the first or last child of a container, there is another api option:
$("#container").append( html );
$("#container").prepend( html );
(For the sake of completeness, append / prepend are the links into the jQuery API docs)
If you want to add an element inside an other with jquery, you have to do like this :
$('#container').append(html);
I am using this code to get the parent object-
alert(parent.document.getElementById('test:input'))
By doing this I am getting this
[object HTMLTableElement]
but whenever I am trying to access it's value it's saying undefined.
parent.document.getElementById('test:input').value
And setting the value also not working.
That's because table elements don't have a value. They have child elements (accessible via the children [modern browsers] or childNodes properties [childNodes will also include non-Element children like text nodes), but no value. value is for input and select elements.
You can use the DOM to access and update the table's content. For instance, this will add a row to the end of the first tbody in it, if the table exists and has a tbody:
var table = parent.document.getElementById('test:input'),
tbody = table && table.querySelector("tbody");
if (tbody) {
tbody.insertAdjacentHTML("beforeend",
"<tr><td>Hi there</td></tr>"
);
}
If you want to completely replace its content, you can assign to innerHTML:
parent.document.getElementById('test:input').innerHTML =
"<tbody><tr><td>Hi there</td></tr></tbody>";
I am using clone to add new row to the DOM table dynamically from a button click event like below mentioned. but i want to append the cloned node to a specific row position in the DOM table. i know i can do that by using "insertrow" option but i want to use this using clone.
var newNode = tblBody.rows[1].cloneNode(true);
tblBody.appendChild(newNode);
is there any way to insert or append the "newNode" in a position i dynamically choose rather appending it as last row.
Use .insertBefore() from tblBody, and pass the newNode as teh first argument, and the child of tblBody before which the node should be inserted as the second argument.
// put this node----v before this----v
tblBody.insertBefore(newNode, tblBody.rows[i]);
If tblBody.rows[i] is null or undefined, then .insertBefore() will just behave like .appendChild(), and put it at the end.
node.insertBefore() is what you are looking for: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore