Question

我有一些HTML我正在使用来自CMS的编程我没有写，它正在输出一些HTML无线电选项并重复它们。不幸的是我无法控制这个编程的输出，所以我正在尝试另一种方法，只是尝试只允许一个HTML实例出现。这是一个例子：

<label class="fc_radio" for="shipping_service_101"><input type="radio" name="shipping_service" id="shipping_service_101" value="101|45" class="fc_radio fc_required"><span class="fc_shipping_carrier">USPS International Shipping Rate (tracking included)</span> <span class="fc_shipping_cost"><span class="fc_currency_symbol">$</span>45</span> </label>

<label class="fc_radio" for="shipping_service_101"><input type="radio" name="shipping_service" id="shipping_service_101" value="101|45" class="fc_radio fc_required"><span class="fc_shipping_carrier">USPS International Shipping Rate (tracking included)</span> <span class="fc_shipping_cost"><span class="fc_currency_symbol">$</span>45</span> </label>

正如您所看到的，它是相同的代码。无论如何使用jQuery实际上过滤掉了输出的额外HTML并保留了1个HTML实例？它们位于具有此ID和类的div中：

<div id="fc_shipping_methods_inner" class="fc_shipping_methods_inner">
REPEATING HTML HERE
</div>

Answer 1

试试这个：

var uniqueRadioIDs  = [];

$('#fc_shipping_methods_inner label.fc_radio').each(function() {
  if(uniqueRadioIDs.indexOf($(this).attr('for')) == -1) {
    // unknown yet, add to list
    uniqueRadioIDs.push($(this).attr('for'));
  } 
  else
  {
    // duplicate
    $(this).remove();
  }
});

Answer 2

如果它只是一个额外的元素，你可以这样做：

$('label.fc_radio').eq(1).remove();

示例： http://jsfiddle.net/ZgLaU/

如果它不止一个元素，请使用.slice()

$('label.fc_radio').slice(1).remove();

示例2： http://jsfiddle.net/ZgLaU/1/

如何使用jQuery过滤掉重复的HTML

2 个答案: