We have a page that lists the items in a user's cart. Links are presented with each item for the actions Edit and Remove. We'd like to test the placement of the Edit link by placing it above the remove link using javascript, however I'm not sure how to do it when there are an unknown number of items that could exist within the user's cart.
A snippet from the dom is below:
<div class="item-table first">
<div class="item" data-part-number="ABC123">
<h3 class="item-name">Item 1 name</h3>
<dl>
<dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Blue</dd>
<dt class="edit">Edit</dt><dd></dd>
</dl>
</div>
<div class="item-qty">
<span class="item-qty">QTY:</span>1
<p><a class="delete-item" data-action="delete" href="/deleteitem1url"">Remove Item</a></p>
</div>
</div>
<div class="item-table">
<div class="item" data-part-number="DEF456">
<h3 class="item-name">Item 2 name</h3>
<dl>
<dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Black</dd>
<dt class="edit">Edit</dt><dd></dd>
</dl>
</div>
<div class="item-qty">
<span class="item-qty">QTY:</span>1
<p><a class="delete-item" data-action="delete" href="/deleteitem2url"">Remove Item</a></p>
</div>
</div>
The desired state moves each Edit link to within a new p element above the existing p element that contains Remove Item link.
This should do it:
$('.item-table').each(function() {
var deleteItem = $(this).find('.delete-item');
var editItem = $('<p></p>').append($(this).find('.edit'));
$(deleteItem).before($(editItem));
});
This should do the trick, if you can use jQuery:
$('.item-table .item').each(function() {
$(this).find('.edit').insertBefore($(this).next('.item-qty').find('.delete-item'));
});
Basically, you need to loop through each .item in .item-table. Once you have the .item, you need to find the .edit element and use insertBefore to find the respective .delete-item node and insert the selected .edit node before it.
Here's a working example with jQuery and the actual results.
Related
<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
<div class="item text-center">
<div class="class1"> <p> Something </p> </div>
</div>
$(".class1").hide();
$(".item").click(function () {
$(".class1").show();
})
I want that when the user click div of item, its own class1 should be show();
But in my codes, when the user click item of div, all class1 shows.
How can i do that just own class can be shown?
To fix this you need to use DOM traversal to access the .class1 element(s) within the clicked .item. To do that you can use the this keyword within the event handler to access the element which raised the event. Try this:
$(".item").click(function() {
$(this).find(".class1").show();
})
.class1 { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item text-center">
Foo
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
Bar
<div class="class1">
<p> Something </p>
</div>
</div>
Note in the example that I used CSS to hide the .class1 elements instead of JS. This is because JS runs after the DOM has loaded, so can result in elements being visible for a short time before they are hidden. CSS runs before this, so avoids that occurrence.
$(".class1").hide();
$(".item").click(function () {
$(this).find(".class1").show();
});
<!--The parent divs should not be empty, otherwise when later in the code you call the .hide () method on their respective child divs, there would be nothing left to click on-->
<div class="item text-center">
item1
<div class="class1">
<p> Something </p>
</div>
</div>
<div class="item text-center">
item2
<div class="class1">
<p> Something </p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can use the find () method, the find () method returns the descendant elements of the selected element. Like the code above
I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))
I have the below html structure and I'm trying to get the text of h tags and add as a data- attribute in the corresponding tags:
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
So 'foo' should be set as a data attribute value for anchor 1,2,3 elements and
'bar' should be set as a data attribute value for anchor 4. Something like this:
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>
<a data-custom="bar" href="#">anchor4</a>
I tried to iterate over the elements and I'm struck at the second loop.
$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});
You have an extra double quote two times in your HTML. But, fixing that and foregoing JQuery (which is overkill for such a trivial task), see comments inline below:
// Loop over the links
document.querySelectorAll("div.link > a").forEach(function(item){
// Set the current link data-custom attribute to the nearest
// .body ancestor and the first heading element within that text
item.dataset.custom = item.closest(".body").querySelector(":first-child").textContent;
console.log(item);
});
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
Currently I am trying to turn off an image for the first element in each faqs div class in HTML. I am trying to select the faqs parent element and then query down to find the first list element as in the javascript below:
$(function () {
_faqs = $('.faqs').accordion({
autoHeight: false,
selectedClass: 'open',
animated: "slide",
header: "dt"
});
console.log(_faqs.length); // returns 2, so it is selecting all faqs classes
for (var i = 0; i < _faqs.length; i++) {
_faqs[i].children('.corner.tr').first().hide();
_faqs[i].children('.corner.tl').first().hide();
// also tried using find()
//_faqs[i].find('.corner.tr').first().hide();
//_faqs[i].find('.corner.tl').first().hide();
}
});
The HTML:
<div class="faqs">
<dl class="thefaq">
<div class="corner tl">
<img src="bg-table-tl.gif" alt="" />
</div>
<div class="corner tr">
<img src="bg-table-tr.gif" alt="" />
</div>
<dt>
Question
</dt>
<dd class="open cf">
<p>Answer. <br />
</dd>
</dl>
<br />
</div>
<div class="faqs">
<dl class="thefaq">
<div class="corner tl">
<img src="bg-table-tl.gif" alt="" />
</div>
<div class="corner tr">
<img src="bg-table-tr.gif" alt="" />
</div>
<dt>
Question
</dt>
<dd class="open cf">
<p>Answer. <br />
</dd>
</dl>
<br />
</div>
I keep getting a Uncaught TypeError : object is not a function error displayed in the developer tools console, what am I doing wrong here?
I have inspected the _faqs variable and it seems to contain methods for children yet I continue to get this error...
try
$(".faqs").find(".corner.tr:first,.corner.tl:first").hide();
DEMO
Inside your loop _faqs[i] points to an HTMLElement which has a property called children, which is clearly not a function.
What you're trying to do is to call the children() method of jQuery. You can't call jquery methods on native DOM elements: for that you need to wrap the element in jQuery like $(_faqs[i])
$(_faqs[i]).children('.corner.tl').first().hide();
I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?
If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');
getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>
Can you use jQuery?
It would be as easy as this