Question

我正在使用jQuery并使用

具有以下对象属性

map(function() { 
                return $(this).val();  //get the <checked>'s value
                }).get():

返回以下对象值：

[＆＃34; ABC＆＃34;，＆＃34; ABD曲线＆＃34;，＆＃34; TWER＆＃34;，＆＃34; NBBDD＆＃34;，＆＃34; KLF＆＃34;，＆＃34; WERQ＆＃34;]

我想围绕每个值包装span，例如：

<span class="selected_filter">ABC</span>
<span class="selected_filter">ABD Curve</span>
<span class="selected_filter">TWER</span>
<span class="selected_filter">NBBDD</span>
<span class="selected_filter">KLF</span>
<span class="selected_filter">WERQ</span>

我该怎么做？

更新，以下是我的完整代码： $（this）.val（）将返回所选复选框的值

   function getCheckedValue(arr) {
    arr = $(".bf-c-1 input:checkbox:checked").map(function() { 
                return $(this).val();  //get the selected checkbox value
                }).get();

    return arr;
}


$( document ).ready( function( ) {


var checked_arr = [];

$(".bf-c-1 input:checkbox").each(function() {

        //Do stuff
                if (this.checked) {

                checked_arr = getCheckedValue($(this).val());
                console.log("checked:  ",this.id , checked_arr);

                }
});


$(".bf-c-1 input:checkbox").change(function() {

  checked_arr = getCheckedValue($(this).val());

  $("#checked_value").text(checked_arr.join(','));
});

$("#checked_value").text(checked_arr.join(' '));




});

@ cr0ss;更新HTML：

<div id="checked_value"></div>

<div class="bf-attr-block">
<div class="bf-attr-header bf-attr-2">
Brand
<span class="bf-arrow"></span>
</div>
<input id="search_brand" type="text" placeholder="Search Brand" value="">
<div id="results" class="bf-attr-block-cont brands ">

<div class="bf-attr-filter bf-attr-2 bf-row">
<span class="bf-cell bf-c-1">
<input id="bf-attr-2-0" type="checkbox" value="18 And East" name="attribute_value[2][]">
</span>
<span class="bf-cell bf-c-2">
<label class="bf-attr-val" for="bf-attr-2-0">18 And East</label>
</span>
<span class="bf-cell bf-c-3"></span>
</div>

<div class="bf-attr-filter bf-attr-2 bf-row">
<span class="bf-cell bf-c-1">
<input id="bf-attr-2-1" type="checkbox" value="2nd Day" name="attribute_value[2][]">
</span>
<span class="bf-cell bf-c-2">
<label class="bf-attr-val" for="bf-attr-2-1">2nd Day</label>
</span>
<span class="bf-cell bf-c-3"></span>
</div>


<div class="bf-attr-filter bf-attr-2 bf-row">
<span class="bf-cell bf-c-1">
<input id="bf-attr-2-6" type="checkbox" value="Abaya Suraya" name="attribute_value[2][]">
</span>
<span class="bf-cell bf-c-2">
<label class="bf-attr-val" for="bf-attr-2-6">Abaya Suraya</label>
</span>
<span class="bf-cell bf-c-3"></span>
</div>


</div>

</div>

更新：可以这样做吗？

function displaySelectedFilter(arr){

                arr.each(function (item) {
                var span = $("<span>");
                span.attr('class', 'selected_filter');
                span.text($(this)[0].value);
                $("#checked_value").append(span);
                });

}

$( document ).ready( function( ) {

$("#search_brand").keyup(function(){

  var searchtext = $(this).val().toLowerCase();
  console.log("stext: ",searchtext);
    $("label").each(function() {
     if($(this).text().toString().toLowerCase().indexOf(searchtext)==-1){
        $(this).parent().parent("div").hide();
      } else {
        $(this).parent().parent("div").show();
      }
    });
});

var result = [];
$(".bf-c-1 input:checkbox").each(function() {

        //Do stuff

        result = $("input[name='attribute_value[2][]']:checked");




});


$(".bf-c-1 input:checkbox").change(function() {

  result = $("input[name='attribute_value[2][]']:checked");
  displaySelectedFilter(result);


});


displaySelectedFilter(result);

Answer 1

这里有一个 FIDDLE 来启发你。

假设你实际上检索了你发布的内容，那很容易。不要忘记为selected_filter显式编写CSS。

此代码只是迭代对象，创建span的jQuery实例，附加css和text并附加到div。

$(document).ready(function () {

    var result = ["ABC", "ABD Curve", "TWER", "NBBDD", "KLF", "WERQ"];

    result.forEach(function (item) {
        var span = $("<span>");
        span.attr('class', 'selected_filter');
        span.text(item);
        $("#div").append(span);
    }); 
});

<强>更新：

以下是新的 FIDDLE ，考虑到您的复选框，而不仅仅是＆＃34;对象＆＃34;你说你有。

Answer 2

检查一下：

http://api.jquery.com/wrap/

对于返回的每个元素：

.wrap('<span class="selected_filter"></span>');

如何在jquery对象中包装span

2 个答案: