In my code I have:
<a class="choice" data-name="i_can_a_test_1">
<img class="img-responsive" src="image.png" >
</a>
<a class="choice" data-name="i_can_a_test_2">
<img class="img-responsive" src="image2.png" >
</a>
<table>
<tr><td name="i_can_a_test_1" id="name_cards">i_can_a_test_1</td></tr>
<tr><td name="i_can_a_test_2" id="name_cards">i_can_a_test_2</td></tr>
<tr><td name="cant_a_test_1" id="name_cards">cant_a_test_2</td></tr>
</table>
But now I want: if same, add class for all i_can_a_test_*
$('body').on("click",".choice", function(){
var same_text = $(this).data('name').slice(0,6);
var same = $( 'td[name^='+same_text+']' ).length;
**if same, add class for all "i_can_a_test_*"**
});
Do you know how I can do that? With each i think.
You can achieve that with the attribute starts with selector.
Here: http://api.jquery.com/attribute-starts-with-selector/
$('body').on("click",".choice", function(){
var same = $(this).data('name').slice(0,13);
$('td[name^=' + same + ']').addClass('myClass');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="choice" data-name="i_can_a_test_1">
<img class="img-responsive" src="image.png"/>
</a>
<a class="choice" data-name="i_can_a_test_2">
<img class="img-responsive" src="image2.png"/>
</a>
<table>
<tr><td name="i_can_a_test_1">i_can_a_test_1</td></tr>
<tr><td name="i_can_a_test_2">i_can_a_test_2</td></tr>
<tr><td name="cant_a_test_1">cant_a_test_2</td></tr>
</table>
[...document.getElementsByClassName("*")].filter(e=>e.textContent.split("i_can_a_test_")[1]).forEach(e=>e.ClassName+=" someclass");
That does what youre asking for. However, this is bad style...
After changing id="name_cards" to class:
$('body').on('click', '.choice', function(e) {
var name = $(this).data('name').substr(0,6)
, $cards = $('.name_cards')
;
$cards
.removeClass('red')
.filter('[name^="'+name+'"]')
.addClass('red')
;
});
http://codepen.io/anon/pen/YNGqEQ
Related
I recently made a jquery code that should hides an element if it's href is equal to another element's but i can't be able to make it work...
jsfiddle
HTML
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
CSS
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
JQUERY
var mainhref = $(".a a").attr('href');
if($("a", this).attr('href') == mainhref ) {
$(".a").hide();
}
else {
$(".a").show
}
Using plain javascript :D
let ar = document.getElementsByTagName('a'),
holdarray = [];
Array.from(ar, elem => {
if(holdarray.includes(elem.getAttribute('href')))
elem.parentNode.style.display = 'none'
else
holdarray.push(elem.getAttribute('href'))
})
.a { width:400px;height:100px;background-color:black; }
.thumb { width:400px;height:100px;background-color:green; }
.b { background-color:yellow; }
<div class="a" >
</div>
<div class="thumb">
</div>
<div class="thumb b">
</div>
You can try like this, only check for thumb class then it will hide specific div which contain same href
var mainhref = $(".a a").attr('href');
$('.thumb a').each(function(){
if($(this).attr('href') == mainhref)
{
$(this).parents('.thumb').hide();
}
});
Just select by that href (and parent not containing the base div's class 'a') and hide it
$('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
var mainhref = $(".a a").attr('href');
var parentDiv = $('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" >
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
Try something like this with Jquery.
Loop on each a and store the href. Select all <a> but first with same href and hide the parent
$("a").each(function(){
var href= $(this).attr("href");
$("a[href='"+href+"']").not(":first").parent().hide();
});
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
You should loop through all elements.
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
Here's a trick, using the radio:checked.
$($("a").toArray().reverse()).each(function(index, el){
var href = $(el).attr('href');
$(el).parent().before('<input type="radio" name="' + href + '" class="hidden" checked />');
})
The reason that I use reverse is that I want the first a tag to remain showing. If you want the last a tag to remain, you can just use $('a') instead of $($("a").toArray().reverse())
css:
.hidden { display:none };
input[type=radio]+ div a { display: none };
input[type=radio]:checked + div a { display: block };
With this trick, you can make all the a tag with a unique href. Hope it can help you.
I have the following code
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I want to add <a> before and after the image tag with jQuery. This would be the result:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
Edit: Details from comments
So far, I have tried like this:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
i have add like
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional information from comments
I want to use a different url for each image, like:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
You can do it using the JQuery wrap() function like so:
var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];
$("#slider img").each(function(index, value){
$(this).wrap("<a href='"+arr[index]+"'></a>");
});
Here is the JSFiddle demo
Use .wrap()
Wrap an HTML structure around each element in the set of matched elements.
Here you can store different url in custom attributes which can later be used to wrap element.
$('#slider img').wrap(function() {
return $('<a />', {
"href": $(this).data('url'),
"class" : "myClass"
});
})
.myClass {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img src="images/p1.jpg" data-url='facebook.com' />
<img src="images/p2.jpg" data-url='google.com' />
<img src="images/p3.jpg" data-url='example.com' />
</div>
I have Auto-Generated Code in our CMS based Website like this
<td class="photogalleryItem">
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
I want to copy that href title or Image alt value and insert as below
<td class="photogalleryItem">
<!--Like This <h3 style="text-align:center;">Test</h3>-->
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
How can i do that in using javascript or Jquery.
This code is in Gallery page. so this is repeating for every images
If you have single td with class photogalleryItem,You can use:
$('.photogalleryItem').append('<h3 style="text-align:center;">'+ $('.photogalleryItem').find('img').attr('alt')+'</h3>');
If you have multiple td with class photogalleryItem:
$('.photogalleryItem').each(function(){
$(this).append('<h3 style="text-align:center;">'+ $(this).find('img').attr('alt')+'</h3>');
})
Try this code
$('.photogalleryItem').each(function () {
$(this).prepend('<h3 style="text-align:center;">' + $(this).find('img').attr('alt') + '</h3>');
});
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});
For http://jsfiddle.net/7HWxu/2/ I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change. Any help greatly appreciated. Thanks,
Tom
The issue is that in this code:
<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)
I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:
// Your original code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').
fadeOut().
next('img').
fadeIn().
end().
appendTo('.fadein');
}, 6500);
// Addenda
$("#Table_01").delegate("img", "click", function(e) {
// Show and hide images here based on what e.target is.
});
});
There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>