JavaScript,获取动态创建的标签ID

时间:2015-07-13 15:32:03

标签: javascript dynamic

生成的标签拥有我后来需要的指导。我需要在创建标签列表后获取该信息。这是我的代码:

        <button onclick="getAllListings()">Get All Listings Information</button>
    <br />
    <div id="divDataInsert" name="divDataInsert">
        @foreach (MVCTest1.Models.Listing foundListings in Model._listings)
        {
            string pk_listing_id = "listingsid_" + foundListings.PK_Listings_ID;
            string addressPK = "address_" + foundListings.PK_Listings_ID;
            string address = foundListings.Address.ToString();
            string cityPK = "city_" + foundListings.PK_Listings_ID;
            string city = foundListings.City.ToString();
            string statePK = "state_" + foundListings.PK_Listings_ID;
            string state = foundListings.State.ToString();
            string zipcodePK = "zipcode_" + foundListings.PK_Listings_ID;
            string zipcode = foundListings.ZipCode.ToString();
            string fullAddress = address + ", " + city + " " + state;

            if (foundListings.PK_Listings_ID != null)
            {
                <input type="text" id="lblListing_@pk_listing_id" value="@pk_listing_id" />
            }
        }
    </div>

    function getAllListings(){
    //var listingArray = [document.getElementById("lblListing_")];

    for (var i = 0; i < [document.getElementById("lblListing_")].length; i++) {
        var listingString = document.getElementById("lblListing_").value;
        var guid = listingString.split("_");
        alert(guid[1]);
        i++;
    }
}

我的代码

        public ActionResult Index()
    {
        string sql = "SELECT TOP 10 [PK_Listings_ID], [Address], [City], [State], [ZipCode] FROM dbo.Listings";
        ListingCollection ListOfListings = new ListingCollection();
        ListOfListings._listings = new List<Listing>();
        using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["MVCInsertData"].ToString()))
        {
            conn.Open();
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.Connection = conn;
                cmd.CommandType = System.Data.CommandType.Text;
                cmd.CommandText = sql;

                using(SqlDataReader reader = cmd.ExecuteReader())
                {
                    if (reader != null)
                    {
                        while (reader.Read())
                        {
                            Listing listing = new Listing();
                            listing.PK_Listings_ID = Convert.ToInt32(reader["PK_Listings_ID"]);
                            listing.Address = reader["Address"].ToString();
                            listing.City = reader["City"].ToString();
                            listing.State = reader["State"].ToString();
                            listing.ZipCode = reader["ZipCode"].ToString();

                            ListOfListings._listings.Add(listing);
                        }
                    }
                }
            }
            conn.Close();
        }
        return View(ListOfListings);
    }

其中一个答案涉及在后面的代码中添加JS数组。你是怎么做到的?

*****更新*****

我已将输入更改为:

<input type="text" class="lblListing_" value="@pk_listing_id" />

我已经调整了我的JS:

    function getAllListings(){
    var listingsArray = document.getElementsByClassName("lblListing_");

    for (var i = 0; i < listingsArray.length; i++) {
        var listingString = listingsArray.value;
        var guid = listingString.split("_");
        alert(guid[1]);
    }
}

请记住,我的JS不在document.ready()中。应该是吗?

2 个答案:

答案 0 :(得分:1)

一种方法是让你的代码发出一个包含所有标签的JavaScript数组。一个不同的 - 这是我将采取的方法 - 将使用类名作为&#34;标记&#34;。发射:

<input type="text" class="lblListing_" ...>

然后在您的固定(非动态)JavaScript中,您可以执行以下操作:

function getAllListings(){
    var listings = document.getElementsByClassName("lblListing_");
    for (var i = 0; i < listings.length; i++) {
        var listingString = listings[i].value;
        var guid = listingString.split("_");
        alert(guid[1]);
    }
}

后续问题的更新: JavaScript可以放在任何地方,但不会在加载时运行。何时以及如何运行该功能取决于您需要它做什么。 (我假设alert只是为了测试逻辑。)

答案 1 :(得分:0)

您可以使用jQuery

轻松实现这一目标
$('someSelector').each(function() {
    // do something
});

$("input[id^='lblListing_']").each(function() {
    console.log($(this).val().split("_")[1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lblListing_g-u-i-d-1" value="value1_g-u-i-d-1" />
<input type="text" id="lblListing_g-u-i-d-2" value="value2_g-u-i-d-2" />