Использование Jquery.attr () для получения идентификаторов DIV - PullRequest
Новая
       44

Использование Jquery.attr () для получения идентификаторов DIV

0 голосов
/ 18 октября 2011

Я хочу использовать функции .each и .attr для получения идентификаторов.Я знаю, как это сделать, но я хочу получить каждый идентификатор div из DOM с определенным классом (скажем, «edit») и добавить в него некоторые данные.

Вот чтоУ меня возникли проблемы с: я хочу поместить идентификатор этого конкретного DIV в цикл .each внутри .append.Например: если бы я хотел поместить ссылку в .append, я бы хотел, чтобы ссылка была http://www.website.com/index.php?id=1&div=DIV-ID

Любые идеи, и я, скорее, новичок, поэтому вы можете привести пример кода.Я понимаю attr и .each, хотя в некоторой степени.

Ответы [ 5 ]

2 голосов
/ 18 октября 2011

http://jsfiddle.net/WrGLC/1/

Ради сохранения на этой странице:

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'));

    });

})();
0 голосов
/ 18 октября 2011

Я думаю Я правильно интерпретирую ваши условия: 

<!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>

ОБНОВЛЕНИЕ: @JohnHartsock правильный. Здесь не нужен каждый метод. Я бы скорректировал свой код следующим образом: 

<!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>
0 голосов
/ 18 октября 2011

Я не верю, что вызов jQuery для каждого () был бы необходим.С помощью append () вы можете передать функцию, которая будет представлять текущую итерацию вашего селектора. 

$('div.mydivclass').append(function () {
  return '<a href="http://www.website.com/index.php?id=1&div='+ this.id + '">My Div link</a>';
});

Вот скрипка http://jsfiddle.net/WFd7k/

0 голосов
/ 18 октября 2011

Я угадаю.Вы хотите этого? 

$( '.edit' ).append( function () {
    return '<a href="http://www.website.com/index.php?id=1&div=' + 
        this.id + '">link</a>';
});
0 голосов
/ 18 октября 2011

Вот непроверенное решение, которое выглядит так, как будто оно должно работать.Может не работать, если для элементов div назначено несколько классов. 

$(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>");

        }
    });
});
...