jquery选择器疑问

winzond 2018-06-07 11:02:22

<!DOCTYPE html>

<html>

  <head>

    <title>DVD Ambassador — Disc Locator</title>

    <link rel="stylesheet" type="text/css" href="dvds.css">

    <script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>

    <script type="text/javascript">

      var filterCount = 0;



      $(function() {



        $('#addFilterButton').click(function(){

          var filterItem = $('<div>')

            .addClass('filterItem')

            .appendTo('#filterPane')

            .data('suffix','.' + (filterCount++));

          $('div.template.filterChooser')

              .children().clone().appendTo(filterItem)

              .trigger('adjustName');

        });



        $('select.filterChooser').live('change',function(){

          var filterType = $(':selected',this).attr('data-filter-type');

          var filterItem = $(this).closest('.filterItem');

          $('.qualifier',filterItem).remove();

          $('div.template.'+filterType)

              .children().clone().addClass('qualifier')

              .appendTo(filterItem)

              .trigger('adjustName');

          $('option[value=""]',this).remove();

        });



        $('button.filterRemover').live('click',function(){

          $(this).closest('div.filterItem').remove();

        });



        $('.filterItem [name]').live('adjustName',function(){

          var suffix = $(this).closest('.filterItem').data('suffix');

          if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return;

          $(this).attr('name',$(this).attr('name')+suffix);

        });



        $('#addFilterButton').click();



        $('#filtersForm').submit(function(){

          $('#resultsPane').load('applyFilters',$('#filtersForm').serializeArray());

          return false;

        });



        /* bonus exercise code -- uncomment to enable

        $('input.numeric').live('keypress',function(event){

          if (event.which < 48 || event.which > 57) return false;

        });

        */



      });



    </script>

  </head>



  <body>

    <div id="pageContent">



      <h1>DVD Ambassador</h1>

      <h2>Disc Locator</h2>



      <form id="filtersForm" action="/fetchFilteredResults" method="post">



        <fieldset id="filtersPane">

          <legend>Filters</legend>

          <div id="filterPane"></div>

          <div class="buttonBar">

            <button type="button" id="addFilterButton">Add Filter</button>

            <button type="submit" id="applyFilterButton">Apply Filters</button>

          </div>

        </fieldset>



        <div id="resultsPane"><span class="none">No results displayed</span></div>



      </form>



    </div>



    <!-- hidden templates -->

    <div id="templates">



      <div class="template filterChooser">

        <button type="button" class="filterRemover" title="Remove this filter">X</button>



        <select name="filter" class="filterChooser" title="Select a property to filter">

          <option value="" data-filter-type="" selected="selected">-- choose a filter --</option>

          <option value="title" data-filter-type="stringMatch">DVD Title</option>

          <option value="category" data-filter-type="stringMatch">Category</option>

          <option value="binder" data-filter-type="numberRange">Binder</option>

          <option value="release" data-filter-type="dateRange">Release Date</option>

          <option value="viewed" data-filter-type="boolean">Viewed?</option>

        </select>

      </div>



      <div class="template stringMatch">

        <select name="stringMatchType">

          <option value="*">contains</option>

          <option value="^">starts with</option>

          <option value="$">ends with</option>

          <option value="=">is exactly</option>

        </select>

        <input type="text" name="term"/>

      </div>



      <div class="template numberRange">

        <input type="text" name="numberRange1" class="numeric"/> <span>through</span>

        <input type="text" name="numberRange2" class="numeric"/>

      </div>



      <div class="template dateRange">

        <input type="text" name="dateRange1" class="dateValue"/> <span>through</span>

        <input type="text" name="dateRange2" class="dateValue"/>

      </div>



      <div class="template boolean">

        <input type="radio" name="booleanFilter" value="true" checked="checked"/> <span>Yes</span>

        <input type="radio" name="booleanFilter" value="false"/> <span>No</span>

      </div>



    </div>



  </body>

</html>

http://www.bibeault.org/jqia2/chapter4/dvds/dvds.html，第25行$('.qualifier',filterItem).remove();这个选择器我理解应该是选择所有class=qualifier的元素加filterItem元素的合集，但是事实是(不考虑filterItem)，只选择了当前$("div.filterItem")下的$(".qualifier"),并没有选择所有$(".qualifier")，其它$("div.filterItem")下的$(".qualifier")没有被选中，请教一下，是什么原因？

...全文

228 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

winzond 2018-06-07

打赏
举报

引用 4 楼 ambit_tsai 的回复:

接口：$( selector [, context ] ) 第二位表示上下文，简单讲，就是从context中查找

明白了，本例中就相当于$(this+' option[value=""]'，如果需要选择合集，应该写成1楼那样$(this+',option[value=""]')，真是差之毫厘离之千里啊

wcwtitxu 2018-06-07

打赏
举报

$('.qualifier',filterItem) 等于 $(filterItem).find('.qualifier') 是在 filterItem 下面查找 .qualifier

ambit_tsai-微信 2018-06-07

打赏
举报

接口：$( selector [, context ] ) 第二位表示上下文，简单讲，就是从context中查找

winzond 2018-06-07

打赏
举报

还有第30行

$('option[value=""]',this).remove();

，似乎“,”前的选择器被限定为“,"后的元素的后代了，这个事情不应该啊，教程不是这样教的

htcyrylcmj0415 2018-06-07

打赏
举报


          $('.qualifier,'+filterItem).remove();//我觉得应该是这样,不知对不对

winzond 2018-06-07

打赏
举报

引用 1 楼 htcyrylcmj0415 的回复:


          $('.qualifier,'+filterItem).remove();//我觉得应该是这样,不知对不对

确定没有“+”的，上面有链接，你进去试试，成功的了，没有错的，再查看源代码，确实没有“+”

wcwtitxu 2018-06-07

打赏
举报

引用 6 楼 winzond 的回复:

[quote=引用 4 楼 ambit_tsai 的回复:] 接口：$( selector [, context ] ) 第二位表示上下文，简单讲，就是从context中查找

明白了，本例中就相当于$(this+' option[value=""]'，如果需要选择合集，应该写成1楼那样$(this+',option[value=""]')，真是差之毫厘离之千里啊[/quote] 只当 filterItem 是选择器(string)时才能这样 $('.qualifier,'+filterItem) 要用 $('.qualifier').add(filterItem)