jQuery获得ID的一部分

时间:2018-08-31 10:10:19

标签: jquery element id

我有具有相同id部分的不同元素:

<div id="post-32">
<div id="post-50">
<div id="post-80">

等等。

我需要提取ID帖子的数量,并在div中添加一个值等于“ number-post”的新按钮。

<div id="post-32">...</div>
<div class="myclass">
    <button value="32">click here</button>
</div>

我尝试使用此代码,但每条帖子都返回给我,按钮的数量与帖子的数量一样。

$("[id^='post-']").each(
    function() {
        var id = $(this).attr("id").split("-")[1];
        var r  = $('<button type="button" id="add" value"'+id+'" name="test">Entra</button>');
        $(".myclass").append(r);
    }
);

感谢您的支持。

3 个答案:

答案 0 :(得分:0)

这是您要做什么吗?

$("[id^='post-']").each(
   function() {
      var id = $(this).attr("id").split("-")[1];
      var r  = $('<button type="button" id="add-' + id + '" value"'+id+'" name="test-' 
      + id + '">Entra</button>');
      $(this).append(r);
  }
);

答案 1 :(得分:0)

所以,我认为解决方法如下:

var divs = document.querySelectorAll( 'div[id^="post-"]' );
var myClassDiv = jQuery( document.querySelector( 'div.myclass' ) );

if ( 0 < divs.length && myClassDiv ) {
    divs.forEach(
        function ( item ) {
            var itemID = item.id.split('-')[1];
            var button = document.createElement('button');

            button.type = 'button';
            button.id = 'add'; // you should normally use a unique ID here.
            // button.id = 'add-' + itemID; in order to have a unique button ID
            button.value = itemID;
            button.name = 'test';
            button.innerText = 'Entra'

            myClassDiv.append( jQuery( button ) );
        }
    );
}

答案 2 :(得分:0)

这就是...

$("[id^='post-']").each(
    function() {
        var id = $(this).attr("id").split("-")[1];
        var r  = $('<div class="myclass"><button type="button" id="add-'+id+'" value="'+id+'" name="test['+id+']">Entra</button><div>');
        $(this).prepend(r);
    }
);
.myclass{display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="post-32">The quick brown </div>
<div id="post-50">fox jumps over </div>
<div id="post-80">the lazy dog </div>