JQuery найти элемент с таким же тегом на клике - PullRequest
Новая
       5

JQuery найти элемент с таким же тегом на клике

0 голосов
/ 17 ноября 2011

У меня есть следующий сценарий на моей html-странице, я хочу выбрать атрибут элемента, по которому щелкнули 

<div class="wrapper">
    <div class="section1">
         <div id="1">1</div>
         <div id="2">2</div>
         <div id="3">3</div>
         <div id="4">4</div>
         <div id="5">5</div>
         <div id="6">6</div>
         <div id="7">7</div>
         <div id="8">8</div>
         <div id="9">9</div>
         <div id="10">10</div>
     </div>
     <div class="section2">
     </div>
</div>

Ниже приводится мой jQuery по клику 

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('.section1:div').click(function() {
            alert($(this).attr("id"))
        })
    });

</script>

Ответы [ 4 ]

2 голосов
/ 17 ноября 2011

Ваш jQuery селектор должен быть: 

$('.section1 > div')

: - это фильтр, например, $('.checkbox:checked') - выберет все элементы с флажком класса и фильтром, выбранным из набора.Подробнее о селекторах jQuery here

Кроме того, избегайте использования атрибута language для тега сценария - это прибл.10 лет, как это устарело.

1 голос
/ 17 ноября 2011

Я не знаю, если вы это имеете в виду?

$(document).ready(function () {
    $('.section1 div').click(function() {
        alert(this.id)
    })
});

Но если вы хотите иметь второй выбор, вы не можете использовать тот же идентификатор.

Используйте это: 

<div class="wrapper">
    <div class="section1">
         <div data-info="1">1</div>
         <div data-info="2">2</div>
         <div data-info="3">3</div>
         <div data-info="4">4</div>
         <div data-info="5">5</div>
         <div data-info="6">6</div>
         <div data-info="7">7</div>
         <div data-info="8">8</div>
         <div data-info="9">9</div>
         <div data-info="10">10</div>
     </div>
     <div class="section2">
         <div data-info="1">1</div>
         <div data-info="2">2</div>
         <div data-info="3">3</div>
         <div data-info="4">4</div>
         <div data-info="5">5</div>
         <div data-info="6">6</div>
         <div data-info="7">7</div>
         <div data-info="8">8</div>
         <div data-info="9">9</div>
         <div data-info="10">10</div>
     </div>
</div>

$(document).ready(function () {
    $('.section1 div[data-info]').click(function() {
        alert($(this).data("info") + " clicked within selection " + $(this).parent().attr("class"));
    })
});

.section1 div[data-info]выбирает все элементы DIV в пределах .selection1, которые имеют атрибут с именем data-info.Это можно сделать с помощью [].

1 голос
/ 17 ноября 2011

.section1: div двоеточие неверно.Попробуйте это: 

 $(document).ready(function () {
     $('.section1 div').click(function() {
         alert($(this).attr("id"))
     });
 })
1 голос
/ 17 ноября 2011

В вашем селекторе jQuery замените ':' in ': div' пробелом, указывающим, что вы хотите выбрать элементы DIV. 

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('.section1 div').click(function () {
            alert($(this).attr("id"))
        })
    });
</script>
...