Question

我的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>

Answer 1

您的jQuery选择器应为：

$('.section1 > div')

:是一个过滤器，例如$('.checkbox:checked') - 将选中具有类复选框的所有元素，并从集合中选中过滤器。阅读有关jQuery选择器here

的更多信息

另外，避免对脚本标记使用language属性， - 大约是。已弃用10年。

Answer 2

在jQuery选择器中，将'：div'中的'：'替换为空格，表示您要选择DIV元素。

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

Answer 3

.section1：div冒号错了。试试这个：

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

Answer 4

我不知道这是不是你的意思？

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

但是如果你想进行第二次选择，则不能使用相同的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元素。这可以使用[]完成。

jQuery在点击时找到具有相同标签的元素

4 个答案: