I'm trying to add the paren't ID to its child's rel. I'd like this
<div id="gallery-1>
<a href="">
<a href="">
</div>
<div id="gallery-2">
<a href="">
<a href="">
</div>
to look like this:
<div id="gallery-1" class="gallery">
<a href="" rel="gallery-1">
<a href="" rel="gallery-1">
</div>
<div id="gallery-2" "class="gallery">
<a href="" rel="gallery-2">
<a href="" rel="gallery-2">
</div>
My code:
$('.gallery a').attr('rel', $(this).parent('.gallery').attr('id'));
You need to put the code into a callback. Otherwise, it's called in the original function, not for each element in the collection.
$(".gallery > a").attr("rel", function() {
return $(this).parent().attr("id");
});
Try this:
$("div").each(function(){
var $this = $(this);
var id = $this.attr("id");
$this.children().attr("rel", id);
});
https://jsfiddle.net/0tr5wem0/
Related
This is my Profile Block Code:
<div class="avatars-list">
<a href="#" class="avatar-item">
<img src="img/users/user-1.jpg" alt="Avatar" class="img-fluid">
</a>
<a href="#" class="avatar-item">
<img src="img/users/user-5.jpg" alt="Avatar" class="img-fluid">
</a>
</div>
Shall i replace <a> tag with some <div>, <span>
Actually, we can write a function for each item to navigate to a particalar page right!!
try this
on html
<div ng-click="navigate()"></div>
on js
$scope.navigate = function () {
window.location.href = 'http://www.google.com';
}
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.
For these links
<div class="post_actions">
<a class="color-transition article_delete" href=""><i class="fa fa-pencil"></i></a>
<a class="color-transition article_edit" href="#" id="1"><i class="fa fa-pencil-square-o"></i></a>
</div>
I try to edit their content on click based on each id and class.
Ultil now I have used
$('.article_delete').html('<img src="images/loader.gif" class="loading" />');
But every .article_delete class from page is changing the InnerHTML content.
I tried this:
$('.article_delete#'+article_id).html('<img src="images/loader.gif" class="loading" />');
and this (from a stackoverflow similar post):
document.getElementById(article_id).getElementsByClassName("article_delete")[0].html('<img src="images/loader.gif" class="loading" />');
Any solution? I want to select only .article_delete where id="something".
<div class="post_actions">
<a class="color-transition article_delete" href="" id="test-2"><i class="fa fa-pencil"></i></a>
<a class="color-transition article_edit" href="#" id="test-1"><i class="fa fa-pencil-square-o"></i></a>
</div>
Now take a look at js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".post_actions").on("click","[id^=test]",function(){
$(this).html("your new html");
})
</script>
To get element by ID you must use the Prefix #:
$('#' + ELEM_ID )
To get element by CLASS you must use the Prefix .:
$('.' + ELEM_ID )
To get element by TAG you must use enter the tag name without any prefix:
$('div')
There are many type of selectors and you can combine selectors to get specific result
jQuery Selectors
In your example you can use the this to access clicked element and change it.
Example:
$('.article').on("click", function(){
$(this).html('<span>LOADING ... </span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="post_actions">
<a class="color-transition article" href="#">ACTION 1</a>
<br>
<a class="color-transition article" href="#">ACTION 2</a>
<br>
<a class="color-transition article" href="#">ACTION 3</a>
<br>
<a class="color-transition article" href="#">ACTION 4</a>
<br>
<a class="color-transition article" href="#">ACTION 5</a>
<br>
<a class="color-transition article" href="#">ACTION 6</a>
</div>
I finally found the solution myself.
Because i needed the ids from each div to parse them with ajax to php i added just another class for each link.
Here is an example:
PHP
<a class="color-transition article_spam_flag asf'.$id.'" href="#" id="'.$id.'"><i class="fa fa-flag"></i></a>
JS
$(function() {
$(".article_spam_flag").click(function() {
var article_id = $(this).attr("id");
var dataString = 'article_id='+article_id;
//$('a#'+article_id).removeClass('liked');
//document.getElementById(article_id).getElementsByClassName("article_spam_flag")[0].html('<img src="images/loader.gif" class="loading" />');
//$('.article_spam_flag#'+article_id).html('<img src="images/loader.gif" class="loading" />');
//$(this).html('<img src="images/loader.gif" class="loading" />');
$('.asf'+article_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "action/article_spam_flag.php",
data: dataString,
cache: false,
success: function(data){
if (data == 0) {
alert('Actiunea nu a putut fi realizata!');
} else {
//$('.article_spam_flag').fadeIn("slow").html(data);
$('.asf'+article_id).fadeIn("slow").html(data);
//$(this).fadeIn("slow").html(data);
//window.location.href="contact.php?categorie=ArticolFlag: "+article_id;
//floating contact
}
}
});
return false;
});
});
Use Id, something like this,
<div class="post_actions">
<a class="color-transition article_delete adding-img" id="unique_id1" href=""><i class="fa fa-pencil"></i></a>
<a class="color-transition article_edit adding-img" href="#" id="unique_id2"><i class="fa fa-pencil-square-o"></i></a>
</div>
and in js for any one say for id unique_id1
$('#unique_id1').html('<img src="images/loader.gif" class="loading" />');
for both
$('#unique_id1,#unique_id2').html('<img src="images/loader.gif" class="loading" />');
By using class, only that class where you want this
$('.adding-img').html('');
HTML
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
here I want to get <div class="secondparent"> by jQuery or JavaScript. My code would be on Anchor Tag and i want to get its second most parent element by Index number. Or is there any other way? I don't want get element by hard coded ID or CLASS.
You can use parents() and eq()
Using parents() you can get all ancestors
eq() will help to select by index
CODE:
var p1=$('a.link').parents().eq(0);
var p2=$('a.link').parents().eq(1);
var p3=$('a.link').parents().eq(2);
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
Hi now you can used to parent()
var p1=$('a.link').parent();
var p2=$(p1).parent();
var p3=$(p2).parent();
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
The second "click" function of this script doesn't work, I think it's simply a syntax issue. I'm quite new to this. But I need to find a simple way call the live "click" function once for an array of vars.
The script works, just not the second part.
I'm looking for an efficient way to replaceWith an array of different vars, each matching a classed link, and without creating a new function every time.
Any suggestions would be great!
Thanks in advance
<script type="text/javascript">
$(window).load(function(){
$('a.pow').live("click",function(e) {
webgl = $('<iframe src="http://s..."> </iframe>');
e.preventDefault();
$('#slider-wrapper').replaceWith(webgl);
});
$('a.biff').live("click",function(e) {
video = $('<iframe src="http://s..."> </iframe>');
e.preventDefault();
$('#slider-wrapper').replaceWith(video);
});
});
</script>
html
<div id="slider-wrapper">
<div>
<a class="pow" href="">
</a>
</div>
<div>
<a class="biff" href="">
</a>
</div>
next one could be..
<div>
<a class="batman" href="">
</a>
</div>
</div><-- close slider wrapper -->
You can give all your anchors that will load iframes a common class, move the description of the anchor from class to a custom attribute, and have the event handler to act on the custom attribute instead.
<div id="slider-wrapper">
<div>
<a class="link" href="" data-desc="pow">
</a>
<div>
<div>
<a class="link" href="" data-desc="biff">
</a>
<div>
<div>
<a class="link" href="" data-desc="batman">
</a>
<div>
</div>
And in your script:
<script type="text/javascript">
var desc_url_map = {
"pow" : "http://s...",
"biff" : "http://s...",
"batman" : "http://s..."
};
$(window).load(function () {
$('a.link').live('click', function(evt) {
item = $('<iframe src="' + desc_url_map[this.dataset.desc] + '"></iframe>');
$('#slider-wrapper').replaceWith(item);
evt.preventDefault();
});
});
</script>
Hope there are no bugs :)