Using Jquery.attr() to Get DIV IDs
Pergunta
I want to use the .each and .attr function to get div ids. I know how to do that, but what I want to do is grab each div ID from the DOM with a certain class (let's say "edit" class) and .append some data into that div.
Here's what I am having trouble with: I want to put the ID of that particular DIV in the .each loop inside the .append. For example: if I wanted to put a link inside the .append, I would want the link to be http://www.website.com/index.php?id=1&div=DIV-ID
Any ideas, and I'm sorta a novice, so can you provide code example. I understand attr and .each though to an extent.
Solução
For the sake of keeping it on this page:
HTML:
<div id="1" class="edit">A</div>
<div id="2" class="edit">B</div>
<div id="3">C</div>
JS:
// Anonymous loop, in case you copy and paste this script, the vars won't get confused
(function() {
// Loop for each .edit
$('.edit').each(function() {
// Update the text inside
$(this).html('http://www.website.com/id='+$(this).attr('id'));
});
})();
Outras dicas
Here's an untested solution that looks like it should work. It may not work if there are multiple classes assigned to the div
elements.
$(function() {
$('div').each(function() {
var _t = $(this);
var id = _t.attr("id");
if(_t.attr("class") == "someClass") {
_t.append("<a href = 'http://www.website.com/index.php?id=1&div="+id+"'>Hello World!</a>");
}
});
});
I'll guess. You want this?
$( '.edit' ).append( function () {
return '<a href="http://www.website.com/index.php?id=1&div=' +
this.id + '">link</a>';
});
I think I'm correctly interpreting your conditions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="a" class="edit">A</div>
<div id="b" class="edit">B</div>
<div id="c">C</div>
<div id="d" class="save">D</div>
<div id="e" class="edit">E</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$("div.edit").each(function (i) {
var $div = $(this);
$div.append('<a href="http://www.website.com/index.php?id=1&div=' + $div.attr("id") + '">Link</a>');
});
})(jQuery);
</script>
</body>
</html>
UPDATE: @JohnHartsock is correct. No each method is needed here. I'd adjust my code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="a" class="edit">A</div>
<div id="b" class="edit">B</div>
<div id="c">C</div>
<div id="d" class="save">D</div>
<div id="e" class="edit">E</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$("div.edit").append(function () {
var $div = $(this);
$div.append('<a href="http://www.website.com/index.php?id=1&div=' + $div.attr("id") + '">Link</a>');
});
})(jQuery);
</script>
</body>
</html>
I don't believe an jQuery call to each() would be necessary. With append() you can pass a function where this will represent the current iteration of your selector.
$('div.mydivclass').append(function () {
return '<a href="http://www.website.com/index.php?id=1&div='+ this.id + '">My Div link</a>';
});
Here is a fiddle http://jsfiddle.net/WFd7k/