Jquery获取ID的一部分

问题描述 投票:-1回答:3

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

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

等等..

我需要提取数量的id post并在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);
    }
);

感谢您的支持。

jquery element id
3个回答
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>

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);
  }
);

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 ) );
        }
    );
}
© www.soinside.com 2019 - 2024. All rights reserved.