代码之家  ›  专栏  ›  技术社区  ›  Reece

使用.html()获取单个元素

  •  0
  • Reece  · 技术社区  · 7 年前

    <a></a> 只有在所有 .chosen 元素。我该怎么做?

    $('.chosen').each(function(){
      var cur = $(this).html();
      encodeURIComponent(cur);
      $('#custom_crumb').append(cur);
    });
    	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <li class="chosen" style="display: none;">
      <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
      
      <span class="count">(14)</span>
    </li>
    
    <div id="custom_crumb"></div>
    8 回复  |  直到 5 年前
        1
  •  2
  •   T.J. Crowder    7 年前

    如果你想 内部的

    var cur = $(this).find("a").html();
    

    如果你想 它的HTML,然后:

    var cur = $(this).find("a").prop("outerHTML");
    

    现场例子 outerHTML

    $('.chosen').each(function(){
      var cur = $(this).find("a").prop("outerHTML");
      $('#custom_crumb').append(cur);
    });
    <ul>
      <li class="chosen" style="display: none;">
        <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
    
        <span class="count">(14)</span>
      </li>
    </ul>
    
    <div id="custom_crumb"></div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    注意,我删除了 encodeURIComponent(cur); 行,因为您没有使用返回值,所以它不会执行任何操作。如果你出于某种原因想要它(这看起来是件奇怪的事情),把它加回去,但是 cur = encodeURIComponent(cur); .

        2
  •  1
  •   Saud Qureshi    7 年前

    使用.first()。

    $('.chosen > a').first()
    

    :它将返回元素本身,并使用.html()获取内容(html)。 它将选择第一个锚定标记。

        3
  •  1
  •   Ali Imran    7 年前

    您需要在中指定元素

    在这个li中,它有两个元素span和a。对于特定的元素,您需要告诉jquery我只需要一个元素

    $(this).find('a').html()

    $('.chosen').each(function() {
      var cur = $(this).find('a').eq(0).html();
      $('#custom_crumb').append(cur);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <li class="chosen" style="display: none;">
      <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
    
      <span class="count">(14)</span>
    </li>
    
    <div id="custom_crumb"></div>
        4
  •  0
  •   Amit Kumar    7 年前

    你需要找到 a 先贴标签。

    $('.chosen').each(function(){
      var cur = $(this).find('a').html();
      encodeURIComponent(cur);
      $('#custom_crumb').append(cur);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
    <li class="chosen" style="display: none;">
      <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
      
      <span class="count">(14)</span>
    </li>
    </ul>
    
    <div id="custom_crumb"></div>
        5
  •  0
  •   ADyson    7 年前

    a 直接在选择器中的元素:

    $('.chosen a').each(function(){
      var cur = $(this).html();
      $('#custom_crumb').append(cur);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <li class="chosen" style="display: none;">
      <a rel="nofollow" href="http://website.co.uk/shop/?filter_colour=amber">Amber</a>
      
      <span class="count">(14)</span>
    </li>
    
    <div id="custom_crumb"></div>
        6
  •  0
  •   DarknessZX    7 年前

    你可以用 $('.chosen a') chosen

    $('.chosen a').each(function(){
      var cur = $(this).html();
      encodeURIComponent(cur);
      $('#custom_crumb').append(cur);
    });
    
        7
  •  0
  •   Alex    7 年前

    所有的答案都忽略了一个事实 .html() 显然是你想做的事情的错误功能。

    您可以选择锚标记并将其附加到某个位置,也可以克隆它。这两种方法都比读取和重新解析html更有效:

    var crumb = $('#custom_crumb');
    
    $('.chosen').each(function(){
      var anchor = $(this).find('a').first();
    
      crumb.append(anchor);
    
      // or, to keep the a in the <li>
    
      crumb.append(anchor.clone());
    });