为每个<p>添加属性值

时间：2017-05-15 02:08:51

标签： javascript jquery html css html5

我在努力实现这一目标：

我希望jQuery获取每个图标的类名并将其写入每个p元素

HTML 

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container-fluid">
    <div class="text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-1"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-2"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-3"></i></div>
                <p></p>
            </div>
        </div>
    </div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

的jQuery 

function idk() {
    var icon_class = $(".icon i").attr("class"),
        icon_container = $(".col-md-4"),
        icon_p = $('.col-md-4 p');
        icon_p.each(function(){
            icon_p.text(icon_class);
        })
};
$(document).ready(function () {
    idk();
});

的jsfiddle

https://jsfiddle.net/277gpp7r/2/

此代码仅复制第一个图标类名称并将其写入所有＆＃34; p＆＃34;而不是抓住每个类名，但这不是我想要完成的。

我希望得到任何帮助，先谢谢大家！

5 个答案:

答案 0 :(得分：2)

我会循环遍历i，将类存储在var中，然后找到.col-md-4祖先并将p定位在其中，然后将类文本添加到p 

function idk() {
  $('.icon i').each(function() {
    var icon_class = $(this).attr("class"),
      $icon_p = $(this).closest('.col-md-4').find('p');
    $icon_p.text(icon_class);
  });
}

$(document).ready(function() {
  idk();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">
    <div class="text-center">
      <div class="row">
        <div class="col-md-4">
          <div class="icon"><i class="icon-class-1"></i></div>
          <p></p>
        </div>
        <div class="col-md-4">
          <div class="icon"><i class="icon-class-2"></i></div>
          <p></p>
        </div>
        <div class="col-md-4">
          <div class="icon"><i class="icon-class-3"></i></div>
          <p></p>
        </div>
      </div>
    </div>
  </div>
</body>

答案 1 :(得分：1)

function idk() {
  var icon_class = $(".icon i").map(function(){
  return $(this).attr("class")
  }).get().join( " " )
    icon_container = $(".col-md-4"),
    icon_p = $('.col-md-4 p');
  icon_p.each(function() {
    icon_p.text(icon_class);
  })
};
$(document).ready(function() {
  idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="text-center">
    <div class="row">
      <div class="col-md-4">
        <div class="icon"><i class="icon-class-1"></i></div>
        <p>1</p>
      </div>
      <div class="col-md-4">
        <div class="icon"><i class="icon-class-2"></i></div>
        <p>2</p>
      </div>
      <div class="col-md-4">
        <div class="icon"><i class="icon-class-3"></i></div>
        <p>3</p>
      </div>
    </div>
  </div>
</div>

  1. 将所有课程映射到一个数组中。
  2. 然后使用该数组作为每个p
    3. 的文本

答案 2 :(得分：1)

尝试这样的事情。

function idk() {
        $('.col-md-4').each(function(){
        var icon_class = $(this).find(".icon i").attr("class");
        console.log(icon_class);
        icon_container = $(".col-md-4");
        icon_p = $(this).find('p');
             icon_p.text(icon_class);
        });
};
$(document).ready(function () {
    idk();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container-fluid">
    <div class="text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-1"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-2"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-3"></i></div>
                <p></p>
            </div>
        </div>
    </div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

答案 3 :(得分：1)

你可以这样做

function idk() {
  var icon_p = $('.col-md-4 p');
  icon_p.each(function(i, v) {
    find the i & its class in previous div and add it t the element
    var findClass = $(this).prev('div.icon').find('i').attr('class');
    $(this).attr('class', findClass);
  })
};

DEMO

答案 4 :(得分：1)

text(function)是执行此操作的最短路径：

$('.col-md-4 p').text(function(){
   return $(this).prev().find('i').attr('class')
})
p{border:1px solid #ccc; margin-top:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="text-center">
        <div class="row">
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-1"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-2"></i></div>
                <p></p>
            </div>
            <div class="col-md-4">
                <div class="icon"><i class="icon-class-3"></i></div>
                <p></p>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题