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();
Related
The following code to switch images works as expected... until, for formatting reasons, a different HTML tag is introduced to the flow of the controls. By inserting a simple break tag (asterisked below), the block that follows has its logic shifting by one, i.e. clicking on
pict/8/tiny will reveal pict/4/large
pict/4/tiny will reveal pict/5/large
pict/5/tiny will reveal pict/6/large
pict/6/tiny will reveal a blank
A break tag is allowed within a paragraph tag, but why is it confusing the spans for the javascript purpose? And how can this be fixed?
$(document).ready(function() {
$("#image-flip_controls").on('click', 'span', function() {
$("#image-flip img").removeClass("opaque");
var newImage = $(this).index();
$("#image-flip img").eq(newImage).addClass("opaque");
$("#image-flip_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='image-flip_controls'>
<span class="selected"><img src="/pict/1/tiny_27122_20170321160746452.jpg" /></span>
<span><img src="/pict/2/tiny_LI_P_20150215_059.jpg" /></span>
<span><img src="/pict/3/tiny_LI_P_20150215_056.jpg" /></span>
<span><img src="/pict/7/tiny_41513_20180525135457797.jpg" /></span>
**<br />**
<span><img src="/pict/8/tiny_27130_20170321160804655.jpg" /></span>
<span><img src="/pict/4/tiny_LI_P_20140901_016.jpg" /></span>
<span><img src="/pict/5/tiny_LI_P_20120130_005.jpg" /></span>
<span><img src="/pict/6/tiny_EN_P_20140615_033.jpg" /></span>
</p>
<div class='row'>
<div id='image-flip' class='shadow'>
<img class="opaque" src="/pict/1/large_27122_20170321160746452.jpg" />
<img src="/pict/2/large_LI_P_20150215_059.jpg" />
<img src="/pict/3/large_LI_P_20150215_056.jpg" />
<img src="/pict/7/large_41513_20180525135457797.jpg" />
<img src="/pict/8/large_27130_20170321160804655.jpg" />
<img src="/pict/4/large_LI_P_20140901_016.jpg" />
<img src="/pict/5/large_LI_P_20120130_005.jpg" />
<img src="/pict/6/large_EN_P_20140615_033.jpg" />
</div>
</div>
The index of an element is its position within the parent element.
Given <div> <img> <img> </div>:
The first image is the first element in the div
The second image is the second element in the div
Given <div> <img> <br> <img> </div>:
The first image is the first element in the div
The second image is the third element in the div
You seem to expect the <br> element to be ignored. It won't be. It is an element.
Use .index( selector ) to get the index within a jQuery collection instead.
I'm trying to do a simple thing with JQuery but I struggle to understand what I should do.
What I'd like to do is when .overlay-detail is hovered $(this).closest('p img:first-child').css('display', 'none') else ('display', 'block')
(see html to understand)
<div id="block-views-quipe-block">
<div class="field-content">
<p>
<img alt="" src="/sites/default/files/_CA17330lr.jpg">
<img alt="" src="/sites/default/files/_CA17322lr.jpg">
</p>
<div class="overlay-detail">
<p>John Doe 1</p>
<p>job 1</p>
</div>
</div>
<div class="field-content">
<p>
<img alt="" src="/sites/default/files/_CA17330lr.jpg">
<img alt="" src="/sites/default/files/_CA17322lr.jpg">
</p>
<div class="overlay-detail">
<p>John Doe 2</p>
<p>job 2</p>
</div>
</div>
...
</div>
Here is what I thought doing :
$("#block-views-quipe-block .overlay-detail").hover(function(){
$(this).closest('p img:first-child').css("display", "none");
}, function(){
$(this).closest('p img:nth-child(2)').css("display", "block");
});
What am I doing wrong ?
The issue is because closest() looks for parent elements, whereas the p is a sibling. Use prev() instead to get the p, then find() to get the child img:
$("#block-views-quipe-block .overlay-detail").hover(function(){
$(this).prev('p').find('img:first-child').hide();
}, function(){
$(this).prev('p').find('img:nth-child(2)').show();
});
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.
It seemed like nothing special but...
I'm trying to add and remove div, add element function working as expected, but if I delete element, nothing else are working - I cannot add nor delete. And one more problem there - selectors using css class that are same for all elements, but event triggering only on first element.
Here is JS:
//Here i want to clone element and insert its after last element
$("div.addnewitem").on('click', function () {
var $d = $("div.item:first").clone();
$($d).insertAfter("div.item:last");
});
//Here i'm deleting element
$("div.deleteitem").on('click', function (event) {
$(event.target).closest("div.item").remove();
});
And HTML markup:
<div class="item">
<div class="itemphoto">
<img alt="" src="../img/woolrich.png">
</div>
<div class="bigshadow">
<img alt="" src="../img/bigshadow.png">
</div>
<!--This must add new element after last one-->
<div class="addnewitem">
<img alt="" src="../img/addnewitem.png">
</div>
<!--This must delete current div-->
<div class="deleteitem">
<img alt="" src="../img/deleteitem.png">
</div>
<div class="about">
<input type="text" class="link" placeholder="Ссылка на вещь..." name="item_url">
<input type="text" class="link" placeholder="Ссылка на изображение" name="item_image" />
<input type="text" class="name" placeholder="Вещь и бренд..." name="item_name">
<textarea class="review" placeholder="Короткое описание (около 120 символов)..." name="item_desc"></textarea>
<input type="text" class="pricestylist" placeholder="Цена (xxx руб/$)" name="item_price">
</div>
</div>
try the fiddle demo
first").clone(true); , the true was missing, it is withDataAndEvents attribute,
for more details, check clone()
i use a div with uploadify control in it,then use jsrender bind data to edit,but when i want to remove the div to cancel edit in IE,a error says "object required",then failed.who knows why,please tell me,thanks!
the main code:
function edit(){
$("#id").html($("#editTmpl").render(data));
uploadify init
}
function cancelEdit(){
$("#id).remove();
}
the html code:
<div id="editTmpl" type="text/x-jsrender">
<div class="editRow rowEdit communityDraw">
<dl>
<dt>drawing：</dt>
<dd class="divDrawingsContainer" data-id="{{>CommunityId}}">
<div class="attachmentToolbar"><span>
<input id="file_upload-{{>CommunityId}}" type="file" /></span></div>
<div id="uploadingFiles-{{>CommunityId}}"></div>
<div id="divDrawingsDisplayBody-{{>CommunityId}}"></div>
</dd>
</dl>
<i class="clearfloat"></i>
</div><div class="editRow rowEdit communityDraw">
<dl>
<dt>drawing：</dt>
<dd class="divDrawingsContainer" data-id="{{>CommunityId}}">
<div class="attachmentToolbar"><span>
<input id="file_upload-{{>CommunityId}}" type="file" /></span></div>
<div id="uploadingFiles-{{>CommunityId}}"></div>
<div id="divDrawingsDisplayBody-{{>CommunityId}}"></div>
</dd>
</dl>
<i class="clearfloat"></i>
</div>
<div>
Change the syntax error in this function
function cancelEdit(){
$('#id').remove();
}